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 原 ...
随机推荐
- 【.NET】Repeater控件简单的数据绑定（有bool，日期，序号）
前述: 讲的是Repeater,使用的是XML文件读取,没用ADO.NET ,而分页有很多方法,比如用PagedDataSource,或者通过参数在数据源写SQL语句来实现. 页面: <%@ I ...
- 给Cygwin重新安装curl
之前已经安装过了cygwin了,但是重装了系统了. 不过发现cygwin倒是还可以继续使用. 现在想要使用其中的curl工具. 但是却在cygwin安装目录 E:\dev_install_root\c ...
- STM32_USART
USART_InitTypeDef USART_InitStruct; //system_stm32f4xx.c 316 8//stm32f4xx.h 123 25000000 8000000 //1 ...
- ASP.NET中ListBox控件的使用
文章来源:http://www.cnblogs.com/fengzheng126/archive/2012/04/10/2441551.html ListBox控件属性介绍: SelectIndex: ...
- juit测试中报错：org.hibernate.HibernateException: Unable to get the default Bean Validation factory
org.hibernate.HibernateException: Unable to get the default Bean Validation factory 解决方法: 解决方案: 在hib ...
- VS中，如何将存在于解决方案里，但是没有显示出来的文件(或文件夹)显示到项目中。
不知道有没有人跟我一样,刚开始接触VS的时候,没有通过"右键->添加"产生文件,而是直接一些文件或者文件夹建在了项目的本地目录中. 导致最后这些文件(或文件夹)无法在项目中显 ...
- JAVA中数组总结（课堂总结）
数组的特点: Arrays(数组)一种简单的数据结构元素具有相同的数据类型一旦创建之后,尺寸保持不变元素在内存中连续分布例子一:按引用与按值传递的示例源代码: // PassArray.java // ...
- MFC 控件用法
1:IP Control 变量CIPAddressCtrl m_iAddr 关联DDX_Control(pDX,IDC_IPADDRESS1,m_iAddr); 设置地址:m_iAddr.SetAdd ...
- UI_APPEARANCE_SELECTOR 延伸
iOS后属性带UI_APPEARANCE_SELECTOR 可以统一设置全局作用 例如: 1>开关控件 @property(nullable, nonatomic, strong) UIColo ...
- Linux镜像资源收集
1.企业 搜狐开源镜像站: http://mirrors.sohu.com/ 网易开源镜像站: http://mirrors.163.com/ 阿里开源镜像站: http://mirrors.aliy ...