用 JavaScript 创建模块化的交互用户界面
2010-09-14 13:21:31 来源:WEB开发网body 标记内的 Onload 方法
该方法在整个页面加载时调用这个可切换系统。这一点很重要,因为此代码的第一项功能就是在整个页面内搜索可切换的元素。因而,需要确保这些元素已加载。body 内的 onload 方法应该如清单 1 所示。
清单 1. body 内的 onload 处理程序
<body onload="swappable_start();">
... rest of page
</body>
已标记为 swappable 的可切换区域
必须通过 class 参数这样标记每个想要切换的区域。这是页面作者和设计人员需要多加考虑的事情,因为他们需要将此参数添加给每个部分。参见清单 2。
清单 2. 用可切换类注释 div
<div class='swappable'>
lorem ipsum lorem ipsum
</div>
寻找可切换的部分
代码所需做的首要事情是寻找页面将被激活的部分。正如之前提到的,这只要求包围这个部分的标记具有 class 参数。要寻找这些部分,需要找到所有具有可切换 class 的标记。此函数不是标准 DOM 库的一部分,但它很容易实现。清单 3 展示了一个示例实现。
清单 3. getElementsByClass() 的实现
// By Dustin Diaz
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|s)"+searchClass+"(s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
Tags:JavaScript 创建 模块化
编辑录入:爽爽 [复制链接] [打 印]- ››JavaScript拖拽原理的实现
- ››javascript事件列表解说
- ››Javascript代码优化工具UglifyJS
- ››JavaScript Confirm 失效的解决办法
- ››JavaScript页面内拖拽原理分析
- ››javascript中select的常用操作
- ››javascript+css无刷新实现页面样式的更换
- ››javascript 摘记一
- ››JavaScript alert()函数详细使用说明
- ››创建基于PPTP的站点到站点VPN连接:ISA2006系列之...
- ››创建基于L2TP的站点到站点的VPN连接:ISA2006系列...
- ››创建一个Twisted Reactor TCP服务器
更多精彩
赞助商链接