随意改变table的大小 -

adrift

浏览: 19146 次
性别:
来自: 北京

最近访客更多访客>>

lys_billy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

随意改变table的大小

博客分类：

javascript

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

分享到：

解决用QtCreator编译examples时出现的错误 | 自动改变大小的textarea

2011-10-07 21:11
浏览 879
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

随意改变table的大小

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

随意改变table的大小

评论

发表评论

相关推荐

pdf转换为html的渲染效果

jQuery UI的CSS框架

jQuery的"特别事件"扩展

SlickGrid的自定义cell编辑器对象接口

自动改变大小的textarea

最近访客更多访客>>