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 原 ...
随机推荐
- 启动Mysql报错：Another MySQL daemon already running with the same unix socket.
启动Mysql报错: Another MySQL daemon already running with the same unix socket. 删除如下文件即可解决 /var/lib/mysql ...
- C# 中获取时区列表
c#中获取时区列表 下面方法获得的仅仅用来显示和使用,无法用来进行时间转换. public static List<DisplayTimeZone> GetSystemTimeZones( ...
- asp 301代码
<% if request.ServerVariables("HTTP_HOST")="ksfmjy.com" then Response.Status= ...
- 学会Nodejs 的require和exports
NodeJs中模块的导入和导出,是最基本的概念,但是看了之后,心里还是有一些疑惑的地方,比如: 1.有两个文件:part.js 和 main.js,main.js中要想使用part.js中定义的变量和 ...
- java学习 （2）xml操作 SAX（增、删、改、查）
sax是事件驱动的,sax是一种推模式 SAX常用事件: startDocument()----文档开始事件 startElement()-----元素开始事件 charElement()----文本 ...
- lr_abort()、exit（-1） 和 return-1之间的区别
int status; status = web_url("Login", "URL=https://secure.computing.com//login.asp?us ...
- Ubuntu配置Samba
一.安装Ubuntu samba服务器 $ sudo apt-get install samba $ sudo apt-get install smbclient # Linux客户端测试用 二.创建 ...
- 写Java程序的三十个基本规则【新手必读】
(1) 类名首字母应该大写.字段.方法以及对象(句柄)的首字母应小写.对于所有标识符,其中包含的所有单词都应紧靠在一起,而且大写中间单词的首字母.例如: ThisIsAClassName this ...
- 郑州尚学堂：链表的C语言如何实现动态内存分配
一.为什么用动态内存分配 但我们未学习链表的时候,如果要存储数量比较多的同类型或同结构的数据的时候,总是使用一个数组.比如说我们要存储一个班级学生的某科分数,总是定义一个float型(存在0.5分)数 ...
- fiddler抓包使用①
链接:http://jingyan.baidu.com/article/3a2f7c2e0d5f2126aed61175.html 设置好代理后,有的设备需要访问"192.168.1.1 ...