HTML组件库(之一:splitter)

原创 2002年01月10日 09:54:00

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>

怎么样,很简单吧:)

jQuery Splitter 分隔条插件

1.分隔条插件 有左右分隔,上下分隔,我这里介绍的是左右分隔。可以拖动这个分隔条,让左边或者右边的区域放大或缩小。 2.html文件: Terms & Condit...
  • haha_mingg
  • haha_mingg
  • 2012年07月18日 15:12
  • 6852

前端组件库集合

前言 本文包含搭建web app常用的样式/组件等收集列表(移动优先),推荐mark! 0. 前端自动化(Workflow) 前端构建工具 Yeoman – a set of tool...
  • zy_2094
  • zy_2094
  • 2015年12月03日 14:45
  • 561

HTML组件(HTML COMPONENTS)之一

HTML 组件(HTML COMPONENTS)是IE5。0的主要扩展之一,其也最具革命性,微软的意图是用HTML组件来取代ACTIVEX控件,和ACTIVE控件一样,HTML组件是自持续封闭对象,可...
  • jiangxng
  • jiangxng
  • 2008年04月22日 09:18
  • 333

Qt中splitter的使用

QSplitter *splitter1=new QSplitter(Qt::Horizontal);     QTreeWidget *treeWidget=new QTreeWidget;  ...
  • q5512049
  • q5512049
  • 2015年07月30日 17:10
  • 937

TRzSplitter变为水平分隔成上下两组

RzSplitter变为水平分隔成上下两组:费了半天神,查了一堆资料,最后发现在我DelphiXE界面上,属性栏下面有一个Vertical,点击一下就由左右分割(即垂直分割)变为上下分割了。如图: ...
  • wozengcong
  • wozengcong
  • 2015年01月08日 22:15
  • 924

HTML5拓扑图形组件设计之道(一)

HT for Web (http://www.hightopo.com/guide/readme.html)提供了涵盖通用组件、2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所...
  • u013161495
  • u013161495
  • 2016年02月26日 01:55
  • 840

WeUI:专为开发微信HTML5应用的开源Web UI组件库

概述 WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon...
  • qwlovedzm
  • qwlovedzm
  • 2017年01月17日 11:47
  • 794

【Java8】Guava——Splitter

Splitter Guava 提供了 Joiner 类用于将多个对象拼接成字符串,如果我们需要一个反向的操作,就要用到 Splitter 类。Splitter 能够将一个字符串按照指定的分隔符拆分...
  • qq_20597479
  • qq_20597479
  • 2017年04月10日 16:15
  • 501

html中的各种标签组件

1、段落与换行
  • qiaojianfang_1148
  • qiaojianfang_1148
  • 2014年07月14日 14:23
  • 3413

WinCE中串口通讯的调试方法(虚拟串口软件 Serial Splitter Mobile)

转自:http://www.cnblogs.com/we-hjb/archive/2008/12/14/1354871.html  串口是嵌入式系统中应用很广的一种通讯接口。在WinCE中,通常会有一...
  • carlward
  • carlward
  • 2009年06月17日 10:34
  • 2797
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML组件库(之一:splitter)
举报原因:
原因补充:

(最多只允许输入30个字)