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 原 ...
随机推荐
- iOS UIImageView自适应图片大小
窗口大小获取: CGRect screenBounds = [ [UIScreenmainScreen]bounds];//返回的是带有状态栏的Rect CGRect rect = [ [UIScre ...
- git add -f
git add -f 添加已被 .gitignore 忽略的文件/文件夹
- VR应用向导，全球Top10 VR应用排行榜
2016年国际知名产商索尼.三星.HTC.Oculus.YouTube等等都推出了自己的VR设备,与此同时还有自有的VR应用平台,供各位玩家下载应用体验沉浸式VR,当然每个平台的VR应用下载量各不相同 ...
- [SQL基础教程] 2-3 逻辑运算符
[SQL基础教程] 2-3 逻辑运算符 NOT AND OR 优先级 ( )改变优先级 AND 优先级高于 OR NULL 引入三值逻辑
- 每天点滴的进行，css+div简单布局...布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- wcf测试工具
WCF测试工具-WcfStorm WCF测试工具-WcfStorm http://www.wcfstorm.com/wcf/home.aspx WcfStorm is a dead-simple, ...
- log4j.properties 的使用详解
一.log4j.properties 的使用详解 1.输出级别的种类 ERROR.WARN.INFO.DEBUGERROR 为严重错误 主要是程序的错误WARN 为一般警告,比如session丢失IN ...
- XAMPP 的MYSQL无法启动
最近在学习小程序,小程序的后台cms系统需要安装XAMPP软件,这个软件是个集成软件,里面有MySql 和 Apache 等 ,首先进入小程序后台时需要启动MySql 和 Apache Apache ...
- 在Windows上安装MySQL（免安装ZIP版）
在 Windows 上安装MySQL(免安装ZIP版) 因为一些原因,重新安装了MySQL数据库,重装时习惯性使用最新版下载 此过程中发现MySQL 5.7.12 和MySQL 5.6的安装有些区别: ...
- Fox And Jumping
Fox And Jumping 题目链接:http://codeforces.com/problemset/problem/512/B dp 若所选卡片能到达区间内任意点,那么所选卡片的最大公约数为1 ...