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

时间：2021-03-24 10:29:38|栏目：JavaScript代码|点击：次

<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 </p>  </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：JavaScript为对象原型prototype添加属性的两种方式

栏目：JavaScript代码

下一篇：浅谈JSON5解决了JSON的两大痛点

本文标题：添加一个以前写的table的spliter给大家

本文地址：http://www.codeinn.net/misctech/87001.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程