示例下载

插件名称命名为: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插件，使表格的标题列可左右拉伸的更多相关文章

  1. 自定义Jquery插件——由于项目需要，对页面中过长的文本进行截取，鼠标移上去有一个title的提示，所以做了一个Jquery过长文本处理的插件

    由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件下面是代码: // 掉用方式支持 $('select').textBeauty(1 ...

  2. 你真的需要一个jQuery插件吗

    jQuery的插件提供了一个很好的方法,节省了时间和简化了开发,避免程序员从头开始编写每个组件.但是,插件也将一个不稳定因素引入代码中.一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错 ...

  3. Jquery 类似新浪微博，鼠标移到头像，用浮动窗口显示用户信息，已做成一个jquery插件

    请注意!!!!! 该插件demo PHP 的 demo下载  C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...

  4. 如何写一个jquery插件

      本文总结整理一下如何写一个jquery插件?虽然现今各种mvvm框架异常火爆,但是jquery这个陪伴我们成长,给我们带来很多帮助的优秀的库不应该被我们抛弃,写此文章,作为对以往欠下的笔记的补充, ...

  5. jQuery遍历Table表格的行和列

    遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...

  6. 如何使用jQuery写一个jQuery插件

    jQuery插件其实是前端框架的思维,构成一个框架,个人认为必须满足以下几个基础条件:1. 可重用,2. 兼容性,3. 维护方便,虽说现在有很多比较成熟的前端框架,但是也有部分存在配置麻烦,学习成本大 ...

  7. 动手做第一个Chrome插件

    Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...

  8. 开发一个jQuery插件——多级联动菜单

    引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页 ...

  9. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

随机推荐

  1. 天坑 之 java web servlet+jsp项目 配置后 404 （MyEclipse转eclipse）

    最近搞一个自己的博客系统玩,用了servlet+jsp,结果发现了两个大问题: 1.无法 Export 出 WAR文件: 2.生成WAR,放置到TOMCAT的 webapps目录后,http://lo ...

  2. sqlite在c++中的使用方法

    1.需要下载的文件      http://pan.baidu.com/s/1c06NpzM 2.执行文件shell的编译 3.在c++中如何使用 #include <stdio.h> # ...

  3. WCF宿主实践入门

    本篇属于WCF实践入门,由于博主本人水平有限,没有理论上的介绍,仅仅从其几种不同的宿主方式分别介绍WCF的使用. WCF有多种宿主方式:1.自托管宿主,2.windows service宿主,3.II ...

  4. python执行外部程序模块pyshell

    写python程序的时候需要用到调用外部命令的模块,看了一下,还真不少,头疼,用着不顺手.根据官网推荐,我根据官网的subprocess模块定制了一个自己的shell,同时借鉴了github上面的sh ...

  5. 执行引擎子系统——JVM之五

    一.JVM通过执行引擎来完成字节码的执行,在执行过程中JVM采用的是自己的一套指令系统,每个线程在创建后,都会产生一个程序计数器(pc)和栈(Stack). pc:存放了下一条将要执行的指令: Sta ...

  6. wordpress All in one Seo

    原文地址:http://www.7adesign.com/155.html WordPress插件All-in-one-seo-pack详细设置: I enjoy this plugin and ha ...

  7. JIRA官方：缺陷与事务跟踪

    快速跟踪软件缺陷 JIRA的网站页面使测试人员能够快速报告.管理.跟踪缺陷.使用键盘快捷键可以很容易地导航和修改问题.你还可以从IDE直接访问JIRA问题或者通过其它各种桌面客户端.手机客户端.浏览器 ...

  8. WIN_2003_SP2.iso VMware 不能进行网络访问的处理

    1.打开IE发现不能上网的问题 ping命令 发现确实是网络不通: 2.关闭虚拟机设置网络适配器 3.ping命令验证是否设置成功 4.打开IE访问百度

  9. linux修改系统时间date命令加clock -w

    http://m.jb51.net/LINUXjishu/117784.html 修改linux系统时间的方法(date命令) 11-18 23:22:27作者:脚本之家 命令格式为: date -s ...

  10. Linux dirname、basename 指令

    http://blog.sina.com.cn/s/blog_9d074aae01013ctk.html 一.dirname指令 1.功能:从给定的包含绝对路径的文件名中去除文件名(非目录的部分),然 ...