开发学院网页设计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;
}

上一页  1 2 3 4 5 6 7 8  下一页

Tags:JavaScript 创建 模块化

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接