开发学院网页设计 JavaScript 用 JavaScript 创建模块化的交互用户界面阅读

用 JavaScript 创建模块化的交互用户界面

　2010-09-14 13:21:31　来源：WEB开发网　　　

核心提示： body 标记内的 Onload 方法该方法在整个页面加载时调用这个可切换系统，这一点很重要，用 JavaScript 创建模块化的交互用户界面(3)，因为此代码的第一项功能就是在整个页面内搜索可切换的元素，因而，此函数不是标准 DOM 库的一部分，但它很容易实现，需要确保这些元素已加载，

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; }