一個基於jQuery的樹型外掛程式(OrangeTree)使用介紹

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
});
});