OrangeTree
下載地址：OrangeTree
首先大家先看下演示吧！
首先聲明本人美術功底比較差！這個樣式大家就將就一下吧！我將這個無限級樹型插件命名為桔子樹，它主要就分為3個級別的節點：
首級菜單，就是樹上的一級菜單
父級菜單，也就是下面還有節點的菜單
子級菜單，也就是下面沒有節點的菜單
每個節點都可以用CSS控制其樣式，詳細請看下表：
OrangeTree
.OrangeTree
控件
.first_node
首級菜單的默認樣式
.first_node_hover
首級菜單鼠標移上的樣式
.first_node_click
首級菜單鼠標點擊後的樣式
.first_node_subItem
首級菜單下的子級菜單樣式
.Item
父級菜單
.Item_node
父級菜單默認樣式
.Item_node_hover
父級菜單鼠標移上的樣式
.Item_node_click
父級菜單鼠標點擊後的樣式
.Item_Img_bg
父級菜單圖標樣式
.subItem
子級菜單
.subItem span
子級菜單默認樣式
.subItem_node_hover
子級菜單鼠標移上的樣式
.subItem_node_click
子級菜單鼠標點擊後的樣式
.subItem_Img_bg
子級菜單圖標樣式
注：注釋為(*)的樣式建議不要修改
JavaScript參數說明：
OrangeTree
width
控件寬度
height
控件高度
indent
層級縮進
view
初始顯示方式,expanded:全部打開,collapsed:全部關閉,firstNode:指定顯示首級的第幾級(firstNode指定)
firstNode
view為firstNode此屬性指定顯示首級的第幾級
single
指定顯示方式，是否只能開打一級目錄具體用法如下：
首先添加引用
.
代碼如下:
<link href="Styles/OrangeTree.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/OrangeTree.js" type="text/javascript"></script>
HTML
.
代碼如下:
<div class="OrangeTree">
<ul>
<li>……</li>
……
</ul>
</div>
Javascript
.
代碼如下:
$(document).ready(function() {
$(".OrangeTree").OrangeTree({
width:"300px",
height:"500px",
indent:20,
view: "collapsed",
firstNode: 1,
single:false
});
});