随意改变table的大小
楚涵润
适用于chrome,firefox和ie8，其它版本未知
定义一个3X3的表格，最中间的那个单元格存放内容，其余的单元格用来做改变大小的手柄
定义一个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>
类似资料：