基于Web标准的UI组件 — 树状菜单(2)

从这篇开始,你需要拥有一些Javascript和DOM相关的知识才能顺利地学习下去。由于Javascript和DOM都不是三言两语可以说完的东西,如果你对它们还不熟悉,请先到这里学习一下再继续:Javascript在线教程(英文)、DOM在线教程(英文)。

getElementsByClassName()


  为了从一大堆HTML代码中找出我们的树状菜单(也许有多个),我们先来实现一个通过className找DOM节点的方法:getElementsByClassName。这是对浏览器自有DOM方法的一个简单但实用的扩充。

  此方法有两个参数:ele指出以哪个DOM节点为根节点寻找(也就是说只找ele的子节点),className指出符合条件的节点的class属性中必须包含怎样的className。它的返回值是一个数组,存放了所有符合条件的节点。

function getElementsByClassName(ele,className) {
//获取所有子节点
if(document.all){
var children = ele.all;
}else{
var children = ele.getElementsByTagName('*');
}
//遍历子节点并检查className属性
var elements = new Array();
for (var i = 0; i < children.length; i++) {
var child = children[i];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements[elements.length] = child;
break;
}
}
}
return elements;
}

  最前面的一个if-else语是为了兼容IE5(IE5不能运行document.getElementsByTagName('*'))。需要注意的是千万不要用浏览器检测的方法来写脚本,而应该直接使用将要用到的语句来测试是否可以执行,如果返回值为nullundefined,那再换一种方法。这样的脚本可以有更好的兼容性,也更健壮。

  elements[elements.length] = child;,这句同样是为了兼容IE5才没有使用数组的push方法。如果你一定要使用push方法,那么可以在执行getElementsByClassName()之前先重载一遍push方法。代码如下:

Array.prototype.push = function(value){
this[this.length] = value;
}

  注:原本我希望getElementsByClassName也能像push方法一样写,比如HTMLElement.prototype.getElementsByClassName = ...。不过实际操作的时候发现在运行时HTMLElement这个对象并不是固定的,每种tag似乎都不一样,只能作罢。如果你有解决方案请告诉我,谢谢。

  现在我们就可以方便地找出页面上所有的树状菜单了:

var trees	= getElementsByClassName(document,'TreeView');
for(var i=0;i<trees.length;i++){
alert('我是第' + i + '个树状菜单');
//在这里可以更细致地处理每一个树状菜单
}

  最后把上面这几句加到window.onload事件中运行,以便文档一加载完就对树状菜单进行初始化。完整的代码请查看下面例子的源代码。

  查看效果(例1)

区分树枝与树叶

  在上一篇中我们说到树枝和树叶的区别就是这个节点有没有子节点,所以判断树枝和树叶的方法也可以从这个角度来考虑。一个比较直观的方法就是遍历整个树状菜单的DOM树(注意这里两个“树”的区别),看看每个节点是不是拥有子节点,如果有的话我们就给这个节点一个专门的class以示区分。我们这里用一种比较取巧的方法,就是判断各个节点的innerHTML中有没有出现字符串'<ul>'。如果有的话,那么很显然它拥有一个或多个子节点。

var trees	= getElementsByClassName(document,'TreeView');
for(var i=0;i<trees.length;i++){
//先把所有的节点找出来
var nodes = trees[i].getElementsByTagName('LI');
//判断各个节点是否有子节点
for(var j=0;j<nodes.length;j++){
if(nodes[j].innerHTML.toLowerCase().indexOf('<ul>') > -1)
nodes[j].className += 'Open';
}
}

  这里给每个树枝加了一个className:Open,因为我们现在还不能打开关闭树枝,所以只要是树枝那就是open的。当然后面我们会用到Close的:)。相应的修改一下CSS,给树枝一个带减号的图标,表示它是打开的:

.TreeView li.Open{
background:transparent url(opened.gif) 12px 2px no-repeat;
}

  查看效果(例2)

高亮选中项

  接下来实现把当前选中的树枝(或树叶)高亮的功能。有两个时候需要高亮:菜单初始化的时候和点击某个菜单项的时候。

  初始化的时候比较容易处理,直接给需要高亮的节点一个特殊的Class即可,比如“Selected”:

.TreeView li.Selected a:link,
.TreeView li.Selected a:visited,
.TreeView li.Selected a:hover,
.TreeView li.Selected a:active{
background-color:#05F;
color:#FFF;
text-decoration:none;/*去除下划线*/
cursor:default;/*让光标变为普通箭头,假装是不能点的^_^*/
padding:0 2px;/*为了美观考虑,也可以不要这句*/
}

  查看效果(例3)

  这里有几点可能还需要补充说明一下:

  1. 选择器(Selector)的前面为什么要加上.TreeView,这不是冗余代码吗?
    在这个例子中确实是冗余代码,但在实际项目中,一个页面上可能会有各种不同的组件,比如还有一个菜单,被选中的菜单项也用.Selected来表示。这时就需要在选择符的前面先指出是什么组件的选中项以防冲突。当然还有其他的解决办法,比如这里的类不取名为Selectd,改为TreeSelected或者其他什么的,但是这样做人为的把命名方案复杂化了,我个人不推荐这样做。
  2. 选择器为什么分作四行来写?
    因为我们之前已经设置过a的样式,为了提高优先级重载旧的样式,所以需要指定a的四种伪状态(还有其他提高优先级的办法,关于优先级算法,在《网站重构》一书中有详细说明)。
  3. Selected为什么要用在li上,而不直接用在a上?
    这又是一个不太容易说明白的地方,因为很大程度上它是一种个人习惯,只是我个人觉得这样做更合适一些。事实上,写在li上或a上都是可以的,至少看上去(表现层的视角)不会有太大的区别,但是如果你从“表现层”中跳出来,站在“结构层”的视角来看,无论这个菜单的树结构还是DOM结构,一个节点都是由一个li来表达的,a只不过是这个节点内的更细节的部分。虽然我最终是希望给a指定一个特殊的样式(为什么不指定给li?你可以自己试一下),但从XHTML结构来说,这个class="Selected"还是写在li上更合适。(上帝保佑我说清楚了……)

下一篇讲什么?

  这篇文章是我第一次加入Javascript内容,不是很清楚是说浅了还是说深了,请大家在右边留言告诉我你的想法。从下一篇开始,我们开始进入部署鼠标事件和响应鼠标事件方面的内容。也许从下下篇开始再加入一些Javascript面向对象编程的内容,待定待定……hehe^_^

(0)

相关推荐

  • 对YUI扩展的Gird组件 Part-1

    原文地址 文章日期:2006/9/26 新版的GIRD可以支持远程数据了.分页和远程排序的设置是通俗易懂的,另外一些常用的自定义的参数我会在这篇贴子中说明一下.新论坛的界面(在建设中)就是一个分页和远程排序的好例子,而本文的代码均来自那个例子. 新方法和属性 利用LoadableDatatModel对象(XMLDataModel和JSONDataModel的父类)实现分页和远程排序,有若干种的新方法和属性. 下列变量"dm"指的是DataModel的实例. 方法 initPaging(

  • EasyUI的treegrid组件动态加载数据问题的解决办法

    搜遍了treegrid源码和文档发现treegrid是扩展自datagrid和tree的,不过以往利用datagrid的reload方法加参数的方式加载查询结果数据,可是treegrid却只执行reload不能加载带参数的查询结果,可能是做了限制,如下代码不能加载查询结果: 复制代码 代码如下: <table id='treegrid' class='easyui-treegrid' url='/User/List'></table>$('#treegrid').treegrid(

  • 用QuickWAP组件结合ASP建设Wap站点第1/2页

    用QuickWAP组件建设Wap站点教程-准备篇 首先我们要简单了解一下什么是QuickWAP,QuickWAP V1.0精简版是一款基于WAP1.2协议,利用VB6 开发的一个辅助ASP+WML语言编写WAP网页的组件. 其次我们要安装安装QuickWAP V1.0精简版 安装过程如下: 1.首先将QuickWAP.dll文件拷贝到系统system32目录下. Windows 2000/Server/Advanced Server操作系统为: 系统盘符:\WINNT\system32\ Win

  • Jquery下EasyUI组件中的DataGrid结果集清空方法

    我们有一个模块如下图,要求选择"地区"及"代维公司"后,刷新第一个DataGrid框体 并以第一个结果集中的行为数据条件点击完成下一个框体的检索 现在我们已完成相应功能,并在选择"地区"及"代维公司"并保证这两个选项同时有值后,自动刷新第一个DataGrid(DG1)结果集 但是在DG1刷新完毕后,后面两个紧跟的DG2及DG3还是保有之前的结果 我试图更改DG2及DG3的查询条件,手动传一个空的ID值给query()方法,但是

  • ReactiveCocoa代码实践之-UI组件的RAC信号操作

    相关阅读: ReactiveCocoa代码实践之-更多思考 ReactiveCocoa代码实践之-RAC网络请求重构这一节是自己对网络层的一些重构,本节是自己一些代码小实践做出的一些demo程序,基本涵盖大多数UI控件操作. 一.用UISlider实现调色板 假设我们现在做一个demo,上面有一个View用来展示颜色,下面有三个UISlider滑竿分别控制RGB的色值,随着不同滑竿的拖动上面view的颜色会随之改变. 可以先脑补一下不用RAC该怎么写. 如果使用RAC只需要将三个信号包装起来用适

  • jQueryUI如何自定义组件实现代码

    如何开始使用 首先用$.widget()方法开始定义你的组件,它只接收三个参数:第一个是组件名称,第二个是可选的基类组件(默认的基类是$.Widget),第三个是组件的原型. 组件名称必须包含命名空间,要注意的是,官方组件的命名空间是以'ui'开头的,比如:'ui.tabs'.我在下面的用'我'的拼音('wo'). 复制代码 代码如下: $.widget("yourNamespace.yourWidgetName",[yourBaseWidget],yourWidgetPrototyp

  • easyui Draggable组件实现拖动效果

    easyui做为一个封装了JQusey的UI插件,其实还是蛮好用的,至少省了像我这种渣渣很多时间. Draggable的加载方式有两种: 1,通过class加载,如下: <div id="box" class="easyui-draggable"></div> 通过JS加载,如下: $('#box').draggable(); 以上两点需要注意的是不管是'easyui-draggable',还是draggable 都是固定的,他们都是通过调用

  • MX 2004 UIScrollBar组件教程

    flashMx 2004 更新到7.2后新加入了UIScrollBar组件.可惜中文帮助文档并没有更新,为了方便中文版用户的使用我写了这个简单教程,希望能对大家有所帮助. 1.运行Flash mx 2004,新建一空白文档(500*240).在菜单上选择视图--对齐--对齐对象(如图示).2.选择文本工具,在舞台上拖一矩形文本框,在属性栏上设置如下:输入文本,多行,在文本周围显示边框,实例名为"myText".3.打开组件面板,把UIScrollBar组件拖入舞台贴紧文本框的右边缘,由

  • 基于Web标准的UI组件 — 树状菜单(2)

    从这篇开始,你需要拥有一些Javascript和DOM相关的知识才能顺利地学习下去.由于Javascript和DOM都不是三言两语可以说完的东西,如果你对它们还不熟悉,请先到这里学习一下再继续:Javascript在线教程(英文).DOM在线教程(英文). getElementsByClassName() 为了从一大堆HTML代码中找出我们的树状菜单(也许有多个),我们先来实现一个通过className找DOM节点的方法:getElementsByClassName.这是对浏览器自有DOM方法的

  • jQuery实现自定义右键菜单的树状菜单效果

    本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单,而且菜单是自动根据鼠标位置来定位的.当鼠标在菜单以外的任意空白处单击一下后会自动消失.这里想特别说明一点所谓的"菜单以外",可以有两种解剖方式--1.除了鼠标在菜单区域内的所有位置:2.如下图所示的A.B.C.D四个区域.显然用第一种方法来剖析会更简单直接一点.源码中的!IsInArea就

  • dtree 网页树状菜单及传递对象集合到js内,动态生成节点

    在winform端,树状菜单是非常有用的,实现这个是非常便捷的,所以我想到在页面放入一个树状菜单的.我选择了dtree这个工具,网络上还有很多方法实现页面树状菜单的,不过我觉得这个比较好用的,而且配置比较简单,运用上上手很快.dtree是纯js的,所以不用导入jar包,并且配置只要在js内配置就好了.而且现在网络上有很多高手修改后的改良版,加了checkbox,更加方便.在开发过程中,最难的就是数据的交互的,因为dtree是纯js的,所以不存在和后台交互的方法,我的办法是先通过后台交互,将数据传

  • js如何构造elementUI树状菜单的数据结构详解

    背景说明 elementUI中自带树状菜单,就是数据结构有点复杂,偏向json风格. 数据库中菜单数据是二维表格,通过parentPk定义上下级,是list型. 需要把list转换成tree的结构. elementUI树状菜单的数据结构 每个节点有4个属性,id.label.newVal.children数组: 通过children数组包含关系标示上下级. var treeData={ id: 1, label: '一级 1', newVal: "", children: [{ id:

  • Spring Boot + Mybatis Plus实现树状菜单的方法

    1.实体类中添加子菜单列表或集合 @TableField(exist = false) private Set<SysMenu> childrenList = new HashSet<>(); 2.定义一个方法递归的获取子菜单 public SysMenu getChildrenList(SysMenu sysMenu, List<SysMenu> sysMenuList) { for (SysMenu menu : sysMenuList) { if (menu.ge

  • 使用函数递归实现基于php和MySQL的动态树型菜单

    树型菜单在很多桌面应用系统中都有非常广泛的应用,其主要优点是结构清晰,利于使用者非常清楚的知道目前自己所在的位置.但在web上树型菜单的应用因为没有理想的现成组件可以拿过来直接使用,所以一般的情况下,程序员主要是通过JavaScript来实现一些简单的树型结构菜单,但这些菜单往往都是事先定好各菜单项目,以及各菜单项目之间的层次关系,不利于扩充,一旦需要另一个菜单结构时,往往还需要重新编写,因此使用起来不是很方便. 经过对函数递归的研究,我发现这种树型菜单可以通过递归函数,使树型菜单的显示实现动态

  • 基于Vue 2.0的模块化前端 UI 组件库小结

    AT-UI 是一款基于 Vue.js 2.0 的轻量级.模块化前端 UI 组件库,主要用于快速开发 PC 网站产品. 专门为桌面应用程序构建,AT-UI 提供了一套 npm + webpack + babel 前端开发工作流程,以及一个体面的干净整洁的 UI 组件. 特性 基于 Vue 开发的 UI 组件 基于 npm + webpack + babel 的工作流,支持 ES2015 CSS 样式独立,保证不同的框架实现都能保持统一的 UI 风格( 详见: AT-UI Style) 提供友好的

  • Vue组件大全包括(UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例)

    Vue是一款比较流行的JS库,本文为大家介绍一些Vue组件,包括UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例等开源项目 一.Vue常用UI组件 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2

  • Java Swing树状组件JTree用法实例详解

    本文实例讲述了Java Swing树状组件JTree用法.分享给大家供大家参考,具体如下: 一.简单样式 先看运行效果: TreeNodeDemo.java package awtDemo; import javax.swing.JFrame; import javax.swing.JTree; import javax.swing.event.TreeSelectionEvent; import javax.swing.event.TreeSelectionListener; import j

  • Mint UI 基于 Vue.js 移动端组件库

    官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引

随机推荐