第26讲 js函数调用过程内存分析 js函数细节
2011-11-30 14:17
639 查看
适用于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>
相关文章推荐
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第26讲_js函数调用过程内存分析_js函数细节_学习笔记_源代码图解_PPT文档整理
- 09 js函数调用过程内存分析、js函数细节
- 韩顺平 javascript教学视频_学习笔记9_js函数调用过程内存分析_js函数细节
- 函数调用过程内存堆栈变化分析
- 函数调用和栈的内存分配过程分析
- 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了;面向对象是把构成问题事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为(转)
- 从最简单的add函数调用过程分析函数栈桢创建和销毁的过程
- 从汇编的角度分析函数调用过程(2)
- 分析exec*函数对应的系统调用处理过程
- C++类对象内存模型与成员函数调用分析(下)
- C 函数调用过程Ollydbg 反汇编分析 Demo int add(int,int)
- C++类对象内存模型与成员函数调用分析(上)
- C++类对象内存模型与成员函数调用分析(下)
- c函数调用过程原理及函数栈帧分析
- c函数调用过程原理及函数栈帧分析
- 栈帧与函数调用过程分析
- C++类对象内存模型与成员函数调用分析(上)
- 从简单的Add函数分析函数调用及函数栈帧过程