页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

添加一个以前写的table的spliter给大家

发布：dxy 发布日期：2007-1-9 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
 <title> neverSpliter - http://www.never-online.net </title> 
 <meta http-equiv="ImageToolbar" content="no" /> 
 <meta name="author" content="never-online, BlueDestiny"/> 
 <meta name="keywords" content="never modules, Mozilla CSS, C#, .net, Reference, BlueDestiny, never-online"/> 
 <meta name="description" content="javascript reference, c sharp artilces"/> 
 <meta name="creator.name" content="never-online, BlueDestiny" /> 
 <style type="text/css" media="all" title="Default"> 
 body, td { font:9pt "Verdana"; } 
 table { border:4px solid buttonface; } 
 .innerSpliter { width:4px; height:100%; border:1px outset buttonhighlight; background-color:buttonface; overflow:hidden; cursor:col-resize; } 
 .spliterLine { display:none; top:0px; left:100px; position:absolute; border:2px outset button; } 
 </style> 
 <script type="text/javascript"> 
 //<![CDATA[ 
 function getElementOffset(e) 
 { 
 var t = e.offsetTop; 
 var l = e.offsetLeft; 
 var w = e.offsetWidth; 
 var h = e.offsetHeight-1;

while(e=e.offsetParent) { 
 t+=e.offsetTop; 
 l+=e.offsetLeft; 
 } 
 return { 
 top : t, 
 left : l, 
 width : w, 
 height : h 
 } 
 } 
 window.onload = function() 
 { 
 window.lftWrapper = document.getElementById("leftWrapper"); 
 window.rgtWrapper = document.getElementById("rightWrapper"); 
 window.splitObj = document.getElementById("splitLine"); 
 window.bIsMoved = false;

document.getElementById("spliter").onmousedown = handlerDown; 
 document.onmousemove = handlerMove; 
 document.onmouseup = handlerUp; 
 }

function handlerDown() 
 { 
 var elposition = getElementOffset(document.getElementById("spliter")); 
 splitObj.evtX = event.clientX-elposition.left; 
 with (splitObj.style) 
 { 
 display = "block"; 
 left = elposition.left; 
 cursor = "col-resize"; 
 filter = "alpha(opacity=30)"; 
 height = elposition.height; 
 top = elposition.top; 
 } 
 bIsMoved = true; 
 }

function handlerMove() 
 { 
 if (!bIsMoved) return; 
 splitObj.setCapture(); 
 with (splitObj.style) 
 { 
 left = event.clientX - splitObj.evtX; 
 cursor = "col-resize"; 
 } 
 }

function handlerUp() 
 { 
 if (!bIsMoved) return; 
 lftWrapper.style.width = event.clientX - splitObj.evtX; 
 bIsMoved=false; 
 splitObj.releaseCapture(); 
 splitObj.style.display = "none"; 
 }

//]]> 
 </script> 
 </head>

<body id="www.never-online.net"> 
 <div id="splitLine" class="spliterLine"></div> 
 <table cellspacing="0" cellpadding="0" border="0" id="mainWrapper" width="100%" height="500"> 
 <tr> 
 <td width="20%" id="leftWrapper" class="borderTop" valign="top"> 
 I am never-online 
 </td> 
 <td id="spliter" title="drag this line to control leftframe width" width="5" style="overflow:hidden"> 
 <div class="innerSpliter"></div> 
 </td> 
 <td id="rightWrapper" class="borderTop" valign="top"> 
 or BlueDestiny, click here to my <a href="http://blog.never-online.net">blog</a> 
 </td> 
 </tr> 
 </table> 
 <p align="center"> Power By never-online  
 </body> 
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：添加一个以前写的table的spliter给大家