zoukankan      html  css  js  c++  java

  • jQuery表格列宽可变，兼容firfox

    本demo使用jQuery包，实现表格列宽可拖拽功能，并实现页面reset时的重新布局。使用jQuery，方便函数的调用，给要处理的表格添加id 后，直接调用$("#id").movedTh()即可方便实现，修改了firfox的兼容性。

    代码如下：

    [javascript] view plaincopy
    1. <html>  
    2. <head>  
    3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
    4. <mce:script type="text/javascript" src="jquery-1.3.2.min.js" mce_src="jquery-1.3.2.min.js"></mce:script>  
    5. <mce:style><!--  
    6. .resizeDivClass  
    7. {  
    8. position:absolute;  
    9. background-color:gray;  
    10. 2px;  
    11. height:15px;  
    12. z-index:1px;  
    13. display: block;  
    14. cursor:e-resize  
    15. }  
    16. .td1 {  
    17. font-size: 12px;  
    18. white-space:nowrap;  
    19. color:#0000ff;    
    20. }  
    21. --></mce:style><style mce_bogus="1">.resizeDivClass  
    22. {  
    23. position:absolute;  
    24. background-color:gray;  
    25. 2px;  
    26. height:15px;  
    27. z-index:1px;  
    28. display: block;  
    29. cursor:e-resize  
    30. }  
    31. .td1 {  
    32. font-size: 12px;  
    33. white-space:nowrap;  
    34. color:#0000ff;    
    35. }</style>  
    36. <mce:script language=javascript><!--  
    37. /* 
    38.     标题：扩拖拽列表格demo 1.2 
    39.     设计：卢松强 
    40.     博客：http://hi.csdn.net/andensy 
    41.     日期：2010年4月26日 
    42.     说明：修改了firfox兼容性问题，可以很好的兼容火狐浏览器 
    43.     */  
    44.     /* 
    45.     依赖于jQuery 
    46.     */  
    47. (function($){  
    48.     //用正则表达式判断jQuery的版本  
    49.     if (/1/.(0|1|2)/.(0|1|2|3|4|5)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) {  
    50.      alert('movedTh 需要 jQuery v1.2.6 以后版本支持!  你正使用的是 v' + $.fn.jquery);  
    51.     return;  
    52.     }  
    53.     me=null;  
    54.     var ps=3;  
    55.     $.fn.movedTh=function(){  
    56.         me=this;  
    57.         var target = null;  
    58.         var tempStr = "";  
    59.         var i=0;  
    60.         $(me).find("tr:first").find("th").each(function(){  
    61.         tempStr = '<div id="mydiv'+i+'"onmousedown="$().mousedone.movedown(event,this)"  ></div>';  
    62.             var div={};  
    63.             $(this).html($(this).html()+tempStr);  
    64.             var offset = $(this).offset();  
    65.             var pos=offset.left +$(this).width()+ me.offset().left-ps;  
    66.             $("#mydiv"+i).addClass("resizeDivClass");  
    67.             $("#mydiv"+i).css("left",pos);  
    68.             $("#mydiv"+i).css("top",(offset.top+2));  
    69.             i++;  
    70.         }); //end each  
    71.     }   //end moveTh  
    72.     $.fn.mousedone={  
    73.         movedown:function(e,obj){  
    74.             var d=document;  
    75.             var e = window.event||e ;  
    76.             var myX = e.clientX||e.pageX;  
    77.                 obj.mouseDownX=myX ;  
    78.                 obj.pareneTdW=$(obj).parent().width();  //obj.parentElement.offsetWidth;  
    79.                 obj.pareneTableW=me.width();  
    80.                 if(obj.setCapture){  
    81.                     obj.setCapture();  
    82.                 }else if(window.captureEvents){   
    83.                     window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);   
    84.                 }  
    85.             d.onmousemove=function(e){  
    86.                 var dragData=obj;  
    87.                 var event = window.event||e ;  
    88.                 if(!dragData.mouseDownX) return false;  
    89.                 var newWidth=dragData.pareneTdW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX;  
    90.                     if(newWidth>0)  
    91.                     {  
    92.                         $(obj).parent().width(newWidth);  
    93.                         me.width(dragData.pareneTableW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX);  
    94.                         var k=0;  
    95.                         me.find("tr:first").find("th").each(function(){  
    96.                         var offset = $(this).offset();  
    97.                         var pos=offset.left*1+$(this).width()*1+me.offset().left*1-ps;  
    98.                         $("#mydiv"+k).css("left",pos);  
    99.                         k++;  
    100.                         })  //end each  
    101.                     }//end if  
    102.             };  
    103.             d.onmouseup=function(e){  
    104.                 var dragData=obj;  
    105.                     if(dragData.setCapture)  
    106.                     {  
    107.                         dragData.releaseCapture();  
    108.                     }else if(window.captureEvents){  
    109.     　　　　            window.releaseEvents(e.MOUSEMOVE|e.MOUSEUP);  
    110.                     }  
    111.                     dragData.mouseDownX=0;  
    112.             }  
    113.         }  
    114.     }   //end mousedone  
    115.     $(window).resize(function(){  
    116.         setTimeout(function() {   
    117.         var target = null;  
    118.         var tempStr = "";  
    119.         var i=0;  
    120.         $(me).find("tr:first").find("th").each(function(){  
    121.         tempStr = '<div id="mydiv'+i+'"onmousedown="$().mousedone.movedown(event,this)"  ></div>';  
    122.             var div={};  
    123.             $(this).html($(this).html()+tempStr);  
    124.             var offset = $(this).offset();  
    125.             var pos=offset.left +$(this).width()+ me.offset().left-ps;  
    126.             $("#mydiv"+i).addClass("resizeDivClass");  
    127.             $("#mydiv"+i).css("left",pos);  
    128.             i++;  
    129.         }); //end each  
    130.         }, 10);  
    131.     });  
    132. })(jQuery)  
    133. $().ready(function(){  
    134.     $("#tab").movedTh();  
    135. })  
    136. // --></mce:script>  
    137. </head>  
    138. <body onload="">  
    139. <table cellpadding="3" id='' STYLE="table-layout:fixed;" mce_STYLE="table-layout:fixed;" >  
    140. <tr bgcolor=cccccc >  
    141. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr><span style="color:#069" mce_style="color:#069">|</span></th>  
    142. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr><span style="color:#069" mce_style="color:#069">|</span></th>  
    143. </tr></table>  
    144. <br>  
    145. <table cellpadding="3" id='tab' STYLE="table-layout:fixed;" mce_STYLE="table-layout:fixed;" >  
    146. <tr bgcolor=cccccc >  
    147. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>  
    148. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>  
    149. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>  
    150. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>  
    151. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>  
    152. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>  
    153. </tr>  
    154. <tr>  
    155. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    156. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    157. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    158. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    159. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    160. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    161. </tr>  
    162. <tr>  
    163. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    164. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    165. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    166. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    167. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    168. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    169. </tr>  
    170. <tr>  
    171. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    172. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    173. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    174. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    175. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    176. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    177. </tr>  
    178. <tr>  
    179. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    180. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    181. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    182. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    183. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    184. <td class="td1"><nobr>改变table的列宽度</nobr></td>  
    185. </tr>  
    186. </table>  
    187. </body>  
    188. </html>  

    更多0
查看全文
  • 相关阅读:
    django form表单验证
    Django messages框架
    pymysql 操作数据库
    python数据类型详解及列表字典集合推导式详解
    深入flask中的request
    修改sqlarchemy源码使其支持jdbc连接mysql
    深入理解Python中协程的应用机制： 使用纯Python来实现一个操作系统吧！！
    svg坐标转换
    近几年总结
    frp中的json模块
  • 原文地址：https://www.cnblogs.com/y0umer/p/3838928.html
    • Copyright © 2011-2022 走看看