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

UI Components Based on Web Standards - TreeView (1)

　　树状菜单（Tree View）在普通的Web设计中不常用到，但是在一些B/S结构的系统（如OA系统）中是不可缺少的一种UI组件。

　　树状结构不仅是一种有效的信息组织方式，它同时建立了一种索引方式，帮助人类更快地在查找机器中的信息。现代操作系统基本上都使用树状结构来管理磁盘文件，所以大多数人对树状菜单的逻辑模型和操作方式都非常熟悉，对于UI设计师来说就成了一种很好的选择。

基本的XHTML结构

　　先来看看只有一层的树状菜单，你会选什么标签？ul！没错，还有比ul更合适的吗？

<ul>
  <li>树枝1号</li>
  <li>树枝2号</li>
</ul>

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

<ul>
  <li>树根
    <ul>
      <li>树枝1号</li>
      <li>树枝2号</li>
    </ul>
  </li>
</ul>

　　请注意观察一下两个ul之间的嵌套关系。查看效果（例1）

　　再加一些“叶子”上去：

<ul>
  <li>树根
    <ul>
      <li>树枝1号
        <ul>
          <li>叶子11号</li>
          <li>叶子12号</li>
        </ul>
      </li>
      <li>树枝2号<ul>
          <li>叶子21号</li>
          <li>叶子22号</li>
          <li>叶子23号</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

　　查看效果（例2）

　　“一棵树”可以拥有任意多个“树根”、“树枝”和“树叶”。当然，如果一棵树有多个“树根”，那么“根”和“枝”之间的概念就很模糊了，从这里开始，我们把有子节点的节点统一叫做“树枝”，没有子节点的节点叫做“树叶”。

　　如果你不介意的话，把上面例子中的节点加上链接和菜单项提示（不知道这是什么？），就是可以直接使用的“树状菜单”了。你可以把菜单项提示的title属性加在a标签上，也可以加在li标签上，这没有什么区别。不过我建议加在li上，这样万一你有几个不需要加链接的树枝，也可以用统一的方法为他们加上提示。完整的代码如下：

<ul>
  <li title="我是树根"><a href="#">树根</a>
    <ul>
      <li title="我是树枝"><a href="#">树枝1号</a>
        <ul>
          <li title="我是树叶"><a href="#">叶子11号</a></li>
          <li title="我也是树叶"><a href="#">叶子12号</a></li>
        </ul>
      </li>
      <li title="我也是树枝"><a href="#">树枝2号</a>
      	<ul>
          <li title="我们都是树叶"><a href="#">叶子21号</a></li>
          <li title="我讨厌做树叶"><a href="#">叶子22号</a></li>
          <li title="其实我是一朵花"><a href="#">叶子23号</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

　　查看效果（例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的结果应该还可以凑合了。但是一个完美的树状菜单怎么可以不能打开合上？怎么可以不能显示加减号来表示是否有子节点？怎么可以不能明显地指出当前打开的节点？下一篇开始我们就来讲这些……

雅虎收藏