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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 添加一个以前写的table的spliter给大家

Javascript: Javascript实例教程(12) 隐藏script代码; Javascript实例教程(11) 创建\"后退\"按钮; HTC：浏览器上的舞者; JavaScript 小技巧(第四集); Javascript实例教程(20) 使用HoTMetal(7); 点一下，首页地址添加到收藏夹(javascript); Javascript设计漫天雪花; Javascript实例教程(21) OLE Automation(2); Javascript实例教程(20) 使用HoTMetal(3); Javascript制作闪烁的边框; JavaScript对象与数组参考大全; Javascript实例教程(21) OLE Automation(3); 利用JavaScript制作倒计时牌; Javascript实例教程(5) 利用Javascript创建对象; 利用JAVASCRIPT制作简单动画; Javascript实例教程(15) JS代替CGI; Javascript实例教程(19) 数组; JavaScript[对象.属性]集锦之三; Javascript实例教程(21) OLE Automation(6); JavaScript 小技巧(第一集)

No. « ‹ 9 10 11 12 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 84 ::

收藏到网摘: n/a

在修改准备发的批量美化select+可修改select时，在非IE下发现了几个问题鼠标滚轮编程

点击运行可以看到效果:

<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 全选提示:你可先修改部分代码,再按运行]

在修改准备发的批量美化select+可修改select时，在非IE下发现了几个问题鼠标滚轮编程

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

评论 (0) All

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