做了一个jquery插件，使表格的标题列可左右拉伸
插件名称命名为:jquery.tableresize.js，代码如下：
/*
Writen by mlcactus, 2014-11-24
这是我封装的一个jquery插件，能够使table的各列可以左右拉伸，从而使宽度变小或变大
用法：$("#table_id").tableresize();
*/
(function ($) {
$.fn.tableresize = function (options) {
var defaults = {
//当table的宽度到达默认最大值时，是否继续增大以至于出现横向滚动条
resizeTable: true
};
var opts = $.extend(defaults, options); var _document = $("body");
//设定user-select样式，防止内容被选中
var set_user_select = function (jqueryobj, val) {
jqueryobj.css("-moz-user-select", val).css("-webkit-user-select", val).css("-ms-user-select", val);
};
$(this).each(function () {
if (!$.tableresize) {
$.tableresize = {};
}
var _table = $(this);
//设定ID
var id = _table.attr("id") || "tableresize_" + (Math.random() * 100000).toFixed(0).toString();
var tr = _table.find("tr").first(), ths = tr.children(), _firstth = ths.first();
//设定临时变量存放对象
var cobjs = $.tableresize[id] = {};
cobjs._currentObj = null, cobjs._currentLeft = null;
ths.mousemove(function (e) {
var _this = $(this);
var left = _this.offset().left, top = _this.offset().top, width = _this.outerWidth(), height = _this.outerHeight(), right = left + width, bottom = top + height, pageX = e.pageX, pageY = e.pageY;
var leftside = !_firstth.is(_this) && Math.abs(left - pageX) <= 5, rightside = Math.abs(right - pageX) <= 5;
if (cobjs._currentLeft || pageY > top && pageY < bottom && (leftside || rightside)) {
_document.css("cursor", "e-resize");
set_user_select(_table, "none");
if (!cobjs._currentLeft) {
if (leftside) {
cobjs._currentObj = _this.prev();
}
else {
cobjs._currentObj = _this;
}
}
}
else {
_document.css("cursor", "auto");
cobjs._currentObj = null;
}
});
ths.mouseout(function (e) {
if (!cobjs._currentLeft) {
cobjs._currentObj = null;
_document.css("cursor", "auto");
set_user_select(_table, "auto");
}
});
_document.mousedown(function (e) {
if (cobjs._currentObj) {
cobjs._currentLeft = e.pageX;
}
else {
cobjs._currentLeft = null;
}
});
_document.mouseup(function (e) {
if (cobjs._currentLeft) {
var changeWidth = e.pageX - cobjs._currentLeft;
cobjs._currentObj.width(cobjs._currentObj.width() + changeWidth);
if (opts.resizeTable) {
_table.width(_table.width() + changeWidth);
}
}
cobjs._currentObj = null;
cobjs._currentLeft = null;
_document.css("cursor", "auto");
set_user_select(_table, "auto");
});
});
};
})(jQuery);
页面代码为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css" >
td{ text-align:center;}
</style>
<script type="text/javascript" src="script/jquery-1.10.2.js"></script>
<script type="text/javascript" src="script/jquery.tableresize.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//该设置使table达到默认最大宽度时，将不再继续变宽
var ops = { resizeTable: false };
//使两张table同时支持左右拉伸
$("table").tableresize(ops);
});
</script>
</head>
<body>
表格1<br/>
<table cellspacing="0" border="1" style="border-collapse:collapse;" rules="all">
<tbody><tr>
<td style="width:200px;">ID</td><td style="width:200px;">名字</td><td style="width:200px;">年纪</td><td style="width:200px;">地址</td><td style="width:200px;">电话</td>
</tr><tr>
<td>22</td><td>Name:44</td><td>Age:23</td><td>Address:47</td><td>Phone:15</td>
</tr><tr>
<td>28</td><td>Name:42</td><td>Age:68</td><td>Address:30</td><td>Phone:50</td>
</tr><tr>
<td>29</td><td>Name:63</td><td>Age:48</td><td>Address:90</td><td>Phone:76</td>
</tr>
</tbody>
</table>
<br/>表格2<br/>
<table cellspacing="0" border="1" style="border-collapse:collapse;" rules="all">
<tbody><tr>
<td style="width:200px;">ID</td><td style="width:200px;">名字</td><td style="width:200px;">年纪</td><td style="width:200px;">地址</td><td style="width:200px;">电话</td>
</tr><tr>
<td>22</td><td>Name:44</td><td>Age:23</td><td>Address:47</td><td>Phone:15</td>
</tr><tr>
<td>28</td><td>Name:42</td><td>Age:68</td><td>Address:30</td><td>Phone:50</td>
</tr>
</tbody></table> </body>
</html>
做了一个jquery插件，使表格的标题列可左右拉伸的更多相关文章
- 自定义Jquery插件——由于项目需要，对页面中过长的文本进行截取，鼠标移上去有一个title的提示，所以做了一个Jquery过长文本处理的插件
由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件下面是代码: // 掉用方式支持 $('select').textBeauty(1 ...
- 你真的需要一个jQuery插件吗
jQuery的插件提供了一个很好的方法,节省了时间和简化了开发,避免程序员从头开始编写每个组件.但是,插件也将一个不稳定因素引入代码中.一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错 ...
- Jquery 类似新浪微博，鼠标移到头像，用浮动窗口显示用户信息，已做成一个jquery插件
请注意!!!!! 该插件demo PHP 的 demo下载 C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...
- 如何写一个jquery插件
本文总结整理一下如何写一个jquery插件?虽然现今各种mvvm框架异常火爆,但是jquery这个陪伴我们成长,给我们带来很多帮助的优秀的库不应该被我们抛弃,写此文章,作为对以往欠下的笔记的补充, ...
- jQuery遍历Table表格的行和列
遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...
- 如何使用jQuery写一个jQuery插件
jQuery插件其实是前端框架的思维,构成一个框架,个人认为必须满足以下几个基础条件:1. 可重用,2. 兼容性,3. 维护方便,虽说现在有很多比较成熟的前端框架,但是也有部分存在配置麻烦,学习成本大 ...
- 动手做第一个Chrome插件
Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...
- 开发一个jQuery插件——多级联动菜单
引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页 ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
随机推荐
- Mplayer ARM平台下交叉编译
下载MPlayer http://www.mplayerhq.hu/design7/dload.html 编译环境 系统 : ubuntu 11.04 交叉编译器版本 : Sourcery G++ L ...
- JAVA byte有无符号数的转换
如果你只需要对英文文本的每个字节进行数据处理,则无需考虑有符号数和无符号数的转换问题: 但如果你需要对含有中文的文本进行字节处理,则可能需要考虑有无符号数的转换问题. 以下代码均为Java代码. 1. ...
- （原）matlab中使用mex编译多个cpp文件
以前一直是mex一个文件.刚才需要编译多个文件(如a.cpp调用b.cpp的函数,b.cpp调用c.cpp的函数).如果只是mex a.cpp,提示函数找不到函数. 突然想到mex c.cpp b.c ...
- 【典型错误】The type java.lang.Object cannot be resolved.
参考:http://blog.csdn.net/wo519074786/article/details/7697967 The type java.lang.Object cannot be reso ...
- jQuery的类数组对象结构
Query就是为了获取DOM.操作DOM而存在的 所以为了更方便这些操作,让节点与实例对象通过一个桥梁给关联起来,jQuery内部就采用了一种叫"类数组对象"的方式作为存储结构,所 ...
- Python的tkinter和tkinter.messagebox应用-鼠标和键盘命令绑定
__author__ = 'Administrator' from tkinter import * import tkinter.messagebox class MainWindow: def b ...
- Spring中的DataBinding(一)
DataBinding在Spring中应用. 第一点:使用ModelAttribute指定带绑定的数据内容 很重要的属性:@ModelAttribute([value=""])可以 ...
- The package does not support the device architecture (x86). You can change the supported architectures in the Android Build section of the Project Opt
The package does not support the device architecture (x86). You can change the supported architectur ...
- 【stm32】ADC的规则通道和注入通道混合使用
之前完成了规则通道DMA的数据传输了,不过平时在使用ADC的时候可能就会遇到很多情况,不可能就这样简单的按规则通道来采样,DMA存储,使用数据的:可能有时候会需要立刻采样,那样我们就需要利用到注入通道 ...
- Android Studio中获取sha1证书指纹数据的方法
高德地图开发申请KEY的时候需要开发者提供SHA1证书指纹数据,在eclipse很容易就找到了,但是Android Studio很久也没找到,只能使用在网上看到的方法了,在Android Studio ...