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

来源：百度文库编辑：神马文学网时间：2024/05/27 06:16:06

基于Web标准的UI组件 — 树状菜单(1)
UI Components Based on Web Standards - TreeView (1)
树状菜单（Tree View）在普通的Web设计中不常用到，但是在一些B/S结构的系统（如OA系统）中是不可缺少的一种UI组件。
树状结构不仅是一种有效的信息组织方式，它同时建立了一种索引方式，帮助人类更快地在查找机器中的信息。现代操作系统基本上都使用树状结构来管理磁盘文件，所以大多数人对树状菜单的逻辑模型和操作方式都非常熟悉，对于UI设计师来说就成了一种很好的选择。
基本的XHTML结构
先来看看只有一层的树状菜单，你会选什么标签？ul！没错，还有比ul更合适的吗？

树枝1号
树枝2号

再把它们都加到一个“树根”上：

树根
- 树枝1号
- 树枝2号

请注意观察一下两个ul之间的嵌套关系。查看效果（例1）
再加一些“叶子”上去：

树根
- 树枝1号
  - 叶子11号
  - 叶子12号
- 树枝2号
  - 叶子21号
  - 叶子22号
  - 叶子23号

查看效果（例2）
“一棵树”可以拥有任意多个“树根”、“树枝”和“树叶”。当然，如果一棵树有多个“树根”，那么“根”和“枝”之间的概念就很模糊了，从这里开始，我们把有子节点的节点统一叫做“树枝”，没有子节点的节点叫做“树叶”。
如果你不介意的话，把上面例子中的节点加上链接和菜单项提示（不知道这是什么？），就是可以直接使用的“树状菜单”了。你可以把菜单项提示的title属性加在a标签上，也可以加在li标签上，这没有什么区别。不过我建议加在li上，这样万一你有几个不需要加链接的树枝，也可以用统一的方法为他们加上提示。完整的代码如下：

树根
- 树枝1号
  - 叶子11号
  - 叶子12号
- 树枝2号

查看效果（例3）
稍微美化一下
作为一个有追求的设计师，这样的树状菜单当然是无法忍受的，这充其量也只是个毛坯，好歹得把墙刷刷吧。给最外层的ul的一个class属性，并赋值为TreeView。一方面把这个ul和它的子子孙孙与其他普通的ul区别开来，也给CSS一个“着力点”。下面是CSS代码：
.TreeView,.TreeView ul{
margin:0;
padding:0;
list-style:none;
font-size:12px;
}
.TreeView li{
padding-left:16px;
text-indent:15px;
line-height:20px;
background:transparent url(folder.gif) 12px 2px no-repeat;
}
.TreeView a:link,.TreeView a:visited{
color:#111;
text-decoration:none;
}
.TreeView a:hover,.TreeView a:active{
color:#05f;
text-decoration:underline;
}
查看效果（例4）。这里并没有什么特别难或者特别奇怪的技巧，如果有不明白的地方，可以先看看《基于Web标准的UI组件 — 菜单(1)》，那里有详细的解释。
下一篇讲什么？
如果只是需要一个简单的树状菜单，例4的结果应该还可以凑合了。但是一个完美的树状菜单怎么可以不能打开合上？怎么可以不能显示加减号来表示是否有子节点？怎么可以不能明显地指出当前打开的节点？下一篇开始我们就来讲这些……

基于Web标准的UI组件 — 树状菜单(1) 基于Web标准的UI组件 — 树状菜单(2) 基于Web标准的UI组件 — 树状菜单(2) - SharkUI.com 基于Web标准的UI组件 — 菜单(1) 基于Web标准的UI组件 — 菜单(2) 基于Web标准的UI组件 — 菜单(1) - SharkUI.com 基于Web标准的UI组件 — 菜单(2) - SharkUI.com 树状结构菜单1(Javascript) 树状结构菜单(Javascript) ColdFusion制作树状菜单 Web 标准实践——豆瓣的首页-豆瓣|UI|UE|草根网IT资讯精读(20ju.com) 基于Web的电子商务解决方案(1) Web数据展现与处理的组件——DJFocus 基于WEB 的数据挖掘综述1 ComponentArt.Web.UI.NavBar 的使用! UI元素的标准词汇中英文对照基于AJAX的WEB设计基于Web的电子商务解决方案(2) 基于Web的电子商务解决方案(3) 基于Web的电子商务解决方案(2) 基于Web的电子商务解决方案(3) 用户界面设计：从抽象到实现——基于规范抽象组件的抽象原型关于 XML 的一些基础知识 - UI - web - JavaEye论坛使用JFreeChart ?建基于web的?表