适用于chrome,firefox和ie8,其它版本未知
定义一个3X3的表格,最中间的那个单元格存放内容,其余的单元格用来做改变大小的手柄
(function($){
$.fn.TableResizer = function(handles) {
if(!handles) handles = "0123456789";
this.each(function() {
var tab = $(this);
$.each(tab.find(">tbody>tr>td"), function(i){
var handle = parseInt(handles.charAt(i));
if(handle==4) return;
$(this).mousedown(function(e){
var mouseDownX=e.clientX, mouseDownY=e.clientY;
var oPlaceholder = $("<div style='filter:alpha(opacity=0);opacity:0;z-index:1;background-color:red;"
+"width:5px;height:5px;position:absolute;margin:0;padding:0;cursor:"+$(this).css("cursor")
+";left:"+(e.clientX-2)+"px;top:"+(e.clientY-2)+"px'/>").appendTo("body");
var originWidth = tab.width(), originHeight = tab.height(), originPos = tab.position();
var fOnMove = function(e) {
if(!mouseDownX) return;
oPlaceholder.css({left:e.clientX-2, top:e.clientY-2});
var deltaX = e.clientX - mouseDownX, deltaY = e.clientY - mouseDownY, idx = handle;
if(idx==0)
tab.css({left:originPos.left+deltaX, width:originWidth-deltaX, top:originPos.top+deltaY, height:originHeight-deltaY});
else if(idx==1)
tab.css({top:originPos.top+deltaY, height:originHeight-deltaY});
else if(idx==2)
tab.css({width:originWidth+deltaX, top:originPos.top+deltaY, height:originHeight-deltaY});
else if(idx==3)
tab.css({left:originPos.left+deltaX, width:originWidth-deltaX});
else if(idx==5)
tab.width(originWidth+deltaX);
else if(idx==6)
tab.css({left:originPos.left+deltaX, width:originWidth-deltaX, height:originHeight+deltaY});
else if(idx==7)
tab.height(originHeight+deltaY);
else
tab.css({width:originWidth+deltaX, height:originHeight+deltaY});
return false;
}
var fOnUp = function() {
mouseDownX = null;
$(this).unbind("mousemove", fOnMove).unbind("mouseup", fOnUp);
oPlaceholder.remove();
}
$(document).mousemove(fOnMove).mouseup(fOnUp);
return false;
})
})
})
return this;
}
})(jQuery)
使用的例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery.js"></script>
<script src="jq.table.resizer.js"></script>
<script>
$(function(){
$("#t1").TableResizer();
});
</script>
</head>
<body>
<table id="t1" style="position:absolute;left:10px;top:50px;border-spacing:0px;border-spacing:expression(this.cellSpacing=0);width:100px" border="0">
<tr style="height:2px">
<td style="background-color:blue;width:2px;cursor:nw-resize"></td>
<td style="background-color:pink;cursor:n-resize"></td>
<td style="background-color:blue;width:2px;cursor:ne-resize"></td>
</tr>
<tr>
<td style="background-color:pink;cursor:w-resize"></td>
<td style="background-color:yellow">
Line1
Line2
</td>
<td style="background-color:pink;cursor:e-resize"></td>
</tr>
<tr style="height:2px">
<td style="background-color:blue;cursor:sw-resize"></td>
<td style="background-color:pink;cursor:s-resize"></td>
<td style="background-color:blue;cursor:se-resize"></td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
修改bootstrap table设置列宽问题,增加插件和bootstrap table组合可随意拖动表格的列宽
包含一个主对话框和两个子对话框(在Tab控件中显示)。常用的MFC控件(包括字体、BMP控件)都可以进行缩放,子...界面的控件ID循环查找存入数组中(这样界面可随意添删控件也不需要改变代码,注意控件ID不允许重复!)
3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字...
3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字...
分页样式9种样式,可以随意改变。手动分页,采用我们的标签,在需要分页处插入我们的标签,即可实现分页效果。 9.产品频道:采用三级频道分类:支持无限极自定义产品属性。采用批量上传图片。全方位展示贵企业的产品...
完善购物车Table表错位的BUG 修复用户注册协议后台不能控制的BUG; 修复密码找回功能失效的BUG; 修复友情链接2行显示时出错的BUG; 修复设首页加收藏错位的BUG 增加注册用户时检索是否已被注册; 增加商品价格区间...
目录、索引、搜索和书签是 chm 文件左边导航嵌窗中的四个导航选项,任何一个都可以随意打开或关闭,当四个功能全部关闭时,导航嵌窗将自动消失。 因为 HHW 对chm 的控制非常灵活,所以你可以制作出功能强大的 ...
CIN:OS/2改变控制文件用于跟踪INI文件中的变化 CLASS:Java类文件 CLP:Windows 剪贴板文件 CLL:Crick Software Clicker文件 CLS:Visual Basic类文件 CMD:Windows NT,OS/2的命令文件;DOS CD/M命令文件;...
104 <br>0171 如何只允许输入指定图片格式 105 <br>0172 如何设置录入图片统一图片大小 105 <br>5.4 数组处理技巧 105 <br>0173 如何转换数组类型 105 <br>0174 如何复制数组中一系列元素的...
LINGO是用来求解线性和非线性优化问题的简易工具。LINGO内置了一种建立最优化模型的语言,可以简便地表达大规模问题,利用LINGO高效的求解器可快速求解并分析结果。 §1 LINGO快速入门 当你在windows下开始运行...
可以自由传播且可任人修改、充实、发展,开发者的初衷是要共同创造一个完美、理想并 可以免费使用的操作系统。 我们并不能使同学们通过这次系列讲座成为一个 UNIX 类操作系统的高手,这次系列 讲座的目的就是在...
建议用户不要随意修改RadminM.txt文件中该字段的内容,不然可能会出现程序功能错乱。 (4)、格式符合要求的RadminM.txt文件示范 RecordName,IP,Port,User,Password,Domain,ColorDepth,Updates,UnlockDesktop,...
建议用户不要随意修改RadminM.txt文件中该字段的内容,不然可能会出现程序功能错乱。 (4)、格式符合要求的RadminM.txt文件示范 RecordName,IP,Port,User,Password,Domain,ColorDepth,Updates,UnlockDesktop,...