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

<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> <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 </p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]