示例下载

插件名称命名为: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. Mysql 记录

    1.创建用户命令: <!---->mysql> CREATE USER yy IDENTIFIED BY '123'; yy表示你要建立的用户名,后面的123表示密码 上面建立的用户 ...

  2. Android Adapter代码片

    /** * Adapter for grid of coupons. */ private static class CouponAdapter extends BaseAdapter { priva ...

  3. php 数组 array_values () array_key()

    <?php // array_unique($array) 去除重复 // array_unshif()向数组的顶部追加函数 // array_shif($a,"ss")向数 ...

  4. SQL Server 备份的 8 种方法。

    方法 1. 完整备份 方法 2. 差异备份 方法 3. 部分备份(备份数据库的read_write部分) 方法 4. 文件备份 方法 5. 文件组备份 方法 6. 只复制备份 方法 7. 日志备份 - ...

  5. MYSQL 维护表的常用 5 方法

    方法 1. analyze table: 本语句用于分析和存储表的关键字分布.在分析期间,使用一个读取锁定对表进行锁定.这对于MyISAM, BDB和InnoDB表有作用. 方法 2. CHECK T ...

  6. Python学习 常识＋基础基础

    特点: 优雅,明确,简单 领域: web网站   网络服务   系统工具和脚本 跨平台 对缩进要求严格 注释:# 动态语言:变量本身类型不固定 raw字符串与 多行字符串 raw字符串: 不需要转义字 ...

  7. python学习day12

    目录 html结构与标签 css样式   html结构之head <head> 标签用于定义文档的头部,它是所有头部元素的容器.<head> 中的元素可以引用脚本.指示浏览器在 ...

  8. Qt creator error: LNK1123: 转换到 COFF 期间失败: 文件无效或损坏（vs2010的嵌入式清单文件）

    下面是vs2010导入别人文件时出现的问题的解决方案:VS2010在经历一些更新后,建立Win32 Console Project时会出“error LNK1123” 错误,解决方案为将 项目|项目属 ...

  9. Inno Setup 安装inf文件的一个例子

    原文 http://zwkufo.blog.163.com/blog/static/2588251201063033524889/ ; INF安装例子; [Setup]; 注意: AppId 的值是唯 ...

  10. poj 3253 Fence Repair(模拟huffman树 + 优先队列)

    题意:如果要切断一个长度为a的木条需要花费代价a, 问要切出要求的n个木条所需的最小代价. 思路:模拟huffman树,每次选取最小的两个数加入结果,再将这两个数的和加入队列. 注意priority_ ...