CSDN博客

img kingpower

HTML组件库(之一:splitter)

发表于2002/1/10 9:54:00  645人阅读

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>

怎么样,很简单吧:)

阅读全文
0 0

相关文章推荐

img
取 消
img