添加一個以前寫的table的spliter給大家

2019-11-21 02:22:18

字體：大中小

來源：轉載

供稿：網友

<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="http://m.survivalescaperooms.com/"/>  <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   class="iwvjtn8m0"   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   id="iwvjtn8m0"   class="innerSpliter"></div>  </td>  <td id="rightWrapper" class="borderTop" valign="top">  or BlueDestiny, click here to my <a >blog</a>  </td>  </tr>  </table>  <p align="center"> Power By never-online </p>  </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：sina的lightbox效果。

下一篇：JS中簡單的實現像C#中using功能（有源碼下載）