HTML组件库（之一：splitter）
微软自从在浏览器大战中战胜网景后，其HTML技术逐步走向组件化，从简单的javascript到scrptlet再到behavior技术，渐趋成熟。新版本的IE内部集成了许多很有用的behavior，在微软的站点上亦有免费的behavior库可供下载。其最新的web controls更是提供了几个强大的组件（工具栏,制表（TAB)，树等）。用它们来构筑web程序倍感方便。从本文开始，我将推出一系列HTML组件的实现。这次给大家的是一个水平的splitter。（作为练习，希望大家把这个组件加上垂直方向split的功能）
源码一：splitter.htc
<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="fnInit()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="fnGrab()" />
<public:event name="onsplit" ID=idsplit />
<SCRIPT LANGUAGE="JScript">
var giY=0; //全局变量，记载起始y坐标。
function fnInit() //初始化代码，给元素添加一个div元素，用于拖动。
{
var oDragWindow = window.document.createElement( "<div style='DISPLAY: none; FILTER: alpha( opacity=20 );POSITION: absolute;BACKGROUND-COLOR: black;overflow:hidden;'>" );
element.dragwindow = oDragWindow;
element.insertAdjacentElement( "beforeEnd" , oDragWindow );
}
function fnGrab() //当鼠标按下时，显示splitter,添加鼠标事件。
{
fnShowDragWindow();
window.document.attachEvent( "onmousemove" , fnMove );
window.document.attachEvent( "onscroll" , fnMove );
window.document.attachEvent( "onmousemove" , fnCheckState );
window.document.attachEvent( "onmouseup" , fnRelease );
window.document.attachEvent( "onselectstart", fnSelect );
}
function fnCheckState()
{
if( event.button != 1 ) fnRelease();
}
function fnSelect()
{
return false;
}
function fnMove() //移动鼠标时，亦同时移动splitter。
{
if (event.button != 1)
{
fnRelease();
return;
}
element.dragwindow.style.top = event.clientY + window.document.body.scrollTop;
if (event.clientY > window.document.body.clientHeight - 10 )
{
window.scrollBy(0, 10);
}
else if (event.clientY < 10)
{
window.scrollBy(event.clientX, -10);
}
}
function fnRelease() //当鼠标释放时，解除页面的鼠标事件，隐藏splitter,并触发onsplit事件。事件带有一个dy参数表示y轴方向的增量。
{
fnHideDragWindow()
var oEvent = createEventObject();
oEvent.dy = event.clientY-giY;
window.document.detachEvent( "onmousemove" , fnMove );
window.document.detachEvent( "onscroll" , fnMove );
window.document.detachEvent( "onmousemove" , fnCheckState );
window.document.detachEvent( "onmouseup" , fnRelease );
window.document.detachEvent( "onselectstart", fnSelect );
idsplit.fire(oEvent);
}
function fnShowDragWindow()
{
var iLeft=element.offsetLeft;
var o=element;
while(o.offsetParent){o=o.offsetParent;iLeft+=o.offsetLeft;}
element.dragwindow.style.height = element.offsetHeight;
element.dragwindow.style.top = event.clientY;
element.dragwindow.style.left = iLeft;
element.dragwindow.style.width = element.offsetWidth;
element.dragwindow.zIndex = 100;
element.dragwindow.style.display = "block";
giY=event.clientY;
}
function fnHideDragWindow()
{
element.dragwindow.style.display = "none";
element.dragwindow.style.height = "";
element.dragwindow.style.top = "";
element.dragwindow.style.left = "";
element.dragwindow.style.width = "";
element.dragwindow.zIndex = "";
}
</SCRIPT>
</PUBLIC:COMPONENT>
源码二：splitter.htm(测试页面)
<html>
<head>
<title>test splitter</title>
</head>
<body>
<div style="background:gray;height:60px;width:100%;">
</div>
<table style="width:100%;height:80%;backgroung:yellow;" cellspacing=10 cellpadding=0>
<tr>
<td rowspan=3 style="width:100px;background:green;">asd</td>
<td style="height:200px;background:blue;" id=box>asd</td>
</tr>
<tr>
<td style="background:black;height:5px;cursor:n-resize;behavior:url(splitter.htc)" onsplit="box.style.pixelHeight+=event.dy;window.status=(event.dy);"></td>
</tr>
<tr>
<td>asd</td>
</tr>
</table>
</body>
</html>
怎么样，很简单吧：） 
|
本类阅读TOP10