table可更改th大小的jQuery插件
(function ($) {
$.fn.resizetable = function () {
var tableObj = $(this);
var inResizeRange = false; //鼠标移到可调整范围内为true
var inResizeRangeLClicked = false; //鼠标在可调整范围内右键按下为true
var inResizing = false; //开始调整大小时为true(鼠标在可调整范围内，并按下右键)
var resizeDiv; //用来显示当前位置的div
var nowThObj; //当前正在调整的th
var dragDirection; //0 left, 1 right
//如果可调整大小，需要将talbe宽度设置为固定数字，这样在调整大小后，整个表格的大小也需要调整
var ths = tableObj.find("th");
for (var i = 0; i < ths.length; i++) {
$(ths[i]).width($(ths[i]).width());
}
tableObj.css("width", tableObj.width());
tableObj.find("th").mousemove(function (e) {
//鼠标在TH移动时，如果在边界范围则将鼠标改成可移动图标（边界范围是在边界的左右2px内）
var pos = $(this).position();
var width = $(this).width();
if (!inResizeRange) {
if (pos.left + width - 2 <= e.clientX) {
$(this).css("cursor", "col-resize");
inResizeRange = true;
nowThObj = this;
dragDirection = 1;
}
if (e.clientX - 2 <= pos.left + 2) {
if (this.cellIndex == 0) return;
$(this).css("cursor", "col-resize");
inResizeRange = true;
nowThObj = this;
dragDirection = 0;
}
}
if (!inResizing) {
if (!(pos.left + width - 2 <= e.clientX || e.clientX - 2 <= pos.left + 2)) {
$(this).css("cursor", "");
inResizeRange = false;
}
}
}).mousedown(function (e) {
//在可迁移范围内按下鼠标右键，创建可移动的div
if (e.button <= 1 && inResizeRange) {
inResizeRangeLClicked = true;
var pos = $(this).position();
createDragDiv(e.clientX, pos.top);
}
});
$("body").mousemove(function (e) {
//移动鼠标，显示当前位置
if (inResizeRange && inResizeRangeLClicked) {
$(this).css("cursor", "col-resize");
resizeDiv.css("left", e.clientX);
}
}).mouseup(function (e) {
//鼠标右键弹起，调整TH宽度，并释放资源
if (e.button <= 1 && inResizeRange) {
adjustWidth(e);
inResizeRangeLClicked = false;
destroy();
}
});
//创建显示调整位置的DIV
function createDragDiv(posLeft, posTop) {
resizeDiv = $("<div style='position:absolute; width:2px; height:50px; background-color:gray;'></div>");
resizeDiv.appendTo("body").css({ "left": posLeft, "top": posTop });
inResizing = true;
}
//重置各标识变量，释放div
function destroy() {
inResizeRange = false;
inResizeRangeLClicked = false;
$("body").css("cursor", "");
resizeDiv.remove();
inResizing = false;
}
//调整TH大小
function adjustWidth(e) {
var resizeWidth = 0;
if (dragDirection == 0) {
//left
resizeWidth = e.clientX - $(nowThObj).position().left;
$(nowThObj).prev("th").width($(nowThObj).prev("th").width() + resizeWidth);
} else {
//right
resizeWidth = e.clientX - ($(nowThObj).position().left + $(nowThObj).width());
$(nowThObj).width($(nowThObj).width() + resizeWidth);
}
tableObj.width(tableObj.width() + resizeWidth);
}
};
})(jQuery)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.resizetable.js"></script>
<script type="text/javascript">
$(function () {
$("#tableTest").resizetable();
});
</script>
<style type="text/css">
table th,td {
border: 1px solid black;
}
body {
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<table id="tableTest" cellpadding="0" cellspacing="0" style="border-collapse:collapse; width:100%;">
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
</table>
</body>
</html>
table可更改th大小的jQuery插件的更多相关文章
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
- 教你开发jQuery插件（转）
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...
- JQuery插件之Jquery.datatables.js用法及api
1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...
- 40 个让你的网站更加友好的 jQuery 插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...
- jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图 ...
- 40个让你的网站屌到爆的jQuery插件
一 个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...
- 动手Jquery插件
自己动手Jquery插件 最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供 ...
- 【转】教你开发jQuery插件
阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文:http://www.cnblo ...
- 开发JQuery插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原 ...
随机推荐
- Ubuntu 16.04上Docker使用手记
一.Docker Hub的使用Docker Hub是Docker官方维护的仓库,里面已经包含了很多的镜像,一般我们的需求直接在官方仓库搜索就可以得到解决.在官方的公共仓库中我们无需登录就可以进行镜像的 ...
- Filewatcher
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...
- 利用requestjs优化响应式移动端js加载
html: <script data-main="main" src="require.js"></script> main.js re ...
- mysql随记
.frm是描述了表的结构,.MYD保存了表的数据记录,*.MYI则是表的索引 ibd是MySQL数据文件.索引文件,无法直接读取. ibdata是innodb引擎使用的 如果是使用myisam引擎 则 ...
- sql convert() 函数
convert: 时间格式转换为其他时间格式的函数 CONVERT ( data_type [ ( length ) ] , expression [ , style ] ) data_type: ...
- sql server 查询出的结果集，拼接某一列赋值给一个变量
现有表Area 如下: SELECT [Areaid] ,[Areaname] ,[Areapid] FROM [Northwind].[dbo].[Area] 查询结果如下图: 需求:用 “-“ ” ...
- 兼容 console 没删除引起 低级浏览器 报错问题
/*重写connsole.log,防止调试代码出错*/if (!window.console){ var names = ["log", "debug", &q ...
- java 枚举类型和数据二进制等问题思考
.以下代码的输出结果是什么? int X=100; int Y=200; System.out.println("X+Y="+X+Y); System.out.println(X+ ...
- [转]URL的解析，C语言实现
http://blog.csdn.net/cuishumao/article/details/10284463 一 说明(1)应用情况:比如基于socket来实现http协议等,这时候就需要解析URL ...
- javascript windows对象
1.windows对象方法 2.计时器方法 3.计时器setInterval() <!DOCTYPE HTML> <html> <head> <meta ht ...