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

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

Javascript: jQuery.fakeFile插件:网站上传控件; SWFObject:JS代码嵌入Flash媒体资源; 30个绝对优秀的JavaScript Web创意应用; 30个JavaScript滑动和滚动效果; jQuery教程:超酷的文字变色效果; 不提示直接关闭网页窗口的JS代码; 解读javascript的计时器(翻译教程); JavaScript2.0提案; JS计数器函数执行过程解读; JS教程:学习Javascript数组; 框架:document.compatMode; Javascript教程:判断函数类型; 实现超酷的日期排列的2种方法; delegate软件实现本地调试客户端代码; 有名函数表达式全面解析(翻译教程); JS教程:lightbox源码解析; JavaScript工厂模式的memoizing技术; javascript编程:编程的陷阱(gotcha); Javascript特效实例10个; Javascript教程:随机数

No. « ‹ 176 177 178 179 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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给大家