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

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

Javascript: 论坛里点击别人帖子下面的回复，回复标题变成“回复 24# 的帖子”; JavaScript 撑出页面文字换行; JavaScript 高级语法介绍; Javascript 表格操作实现代码; javascript 获取鼠标的绝对位置 event; Input 特殊事件onpopertychange和oninput; javascript 一段左右两边随屏滚动的代码; JS 分号引起的一段调试问题; 根据服务器时间作为起始，显示时钟的小程序; js 匿名调用实现代码; javascript 缓冲效果实现代码; javascript htmlencode函数(ff兼容版) 主要是编辑器中反转html代码; javascript 获取radio的value的函数 [已测]; Javascript 代码也可以变得优美的实现方法; 使弱类型的语言JavaScript变强势; js 单引号传递方法; 利用WebBrowser彻底解决Web打印问题（包括后台打印）; web 页面分页打印的实现; 可以拖动的div 实现代码; WordPress 照片lightbox效果的运用几点

No. « ‹ 141 142 143 144 › »

技术文章搜索

关键字

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

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

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