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 原 ...
随机推荐
- 回文质数 Prime Palindromes
题目描述 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找出范围[a,b](5 <= a < b <= 100,000 ...
- Python实现简单的HTTP服务器（支持文件上传下载）
1.python内置模块 SimpleHTTPServer (支持下载功能) 在对应的工作目录下,运行命令python -m SimpleHTTPServer 即可把当前目录下以共享服务的形式共享出 ...
- Gs_Class._BaseQueryWeb查询页面基类(aspx.net)
using System;using System.Data;using System.Configuration;using System.Collections;using System.Web; ...
- [河南省ACM省赛-第三届] AMAZING AUCTION （nyoj 251）
题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=251 规则: 1.若某竞标价唯一,则胜出 2.若不存在唯一竞标价,则投标次数最少竞标价中标 ...
- Dev的GridControl控件选择框的使用
先介绍环境:VS2010,dev11.2 想要达到的效果:,当单击某一行时前面的选择框选中. 在网上找了不少,但是感觉跟我想的做法很不一样(有很多都是再另外添加一个什么CheckBox,这个我在Dev ...
- VMware下安装CentOS6.5
一.工具 1.VMware-workstation-full-12.5.0-4352439.exe 2.CentOS-6.5-x86_64-minimal.iso 二.安装VMware虚拟机 1.选择 ...
- 当今Web应用的主要技术
WWW是World Wide Web的简称,缩写为W3C,称为万维网,也简称为Web.目前Internet已经普及到整个社会,其中Web应用已经称为Internet上最受欢迎的应用之一,正是由于它的出 ...
- javascript静态页面传值的三种方法分享
一:JavaScript静态页面值传递之URL篇能过URL进行传值.把要传递的信息接在URL上.Post.htm 复制代码 代码如下: <input type="text" ...
- ubuntu 16.04下搭建web服务器(MySQL+PHP+Apache) 教程
1.开始说明 下面很多可能参照网上其中以为前辈的,但有所改进吧.这些设置可能会有所不同,你需要根据不同情况进行修改. 安装apache2 2.切换管理员身份 在ubuntu中需要用root身份进行操作 ...
- Ubuntu 14.0 升级内核到指定版本
1.卸载现有内核sudo apt purge linux-headers-* linux-headers-*-generic linux-image-*-generic linux-image-ext ...