随意改变table的大小

最新推荐文章于 2024-10-18 15:48:34 发布

原创最新推荐文章于 2024-10-18 15:48:34 发布 · 488 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用jQuery为一个3X3的表格添加可调整大小的功能，包括中间单元格存放内容，其余单元格作为大小改变的手柄。

适用于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>