OrangeTree
下載地址：OrangeTree

首先大家先看下演示吧！
首先聲明本人美術功底比較差！這個樣式大家就將就一下吧！我將這個無限級樹型插件命名為桔子樹，它主要就分為3個級別的節(jié)點：

首級菜單，就是樹上的一級菜單
父級菜單，也就是下面還有節(jié)點的菜單
子級菜單，也就是下面沒有節(jié)點的菜單
每個節(jié)點都可以用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參數(shù)說明：

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

您可能感興趣的文章:

jquery判斷復選框選中狀態(tài)以及區(qū)分attr和prop
這篇文章主要介紹了jquery判斷復選框選中狀態(tài)以及區(qū)分attr和prop，感興趣的小伙伴們可以參考一下
2015-12-12
關于jquery中動態(tài)增加select,事件無效的快速解決方法
下面小編就為大家?guī)硪黄P于jquery中動態(tài)增加select,事件無效的快速解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
jQuery使用each遍歷循環(huán)的方法
這篇文章主要介紹了jq 用each遍歷循環(huán)的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-09-09
jQuery使用元素屬性attr賦值詳解
本文主要給大家講解的是jQuery使用元素屬性attr設置多個鍵值或函數(shù)的方法和示例，非常的實用，推薦給小伙伴們參考下。
2015-02-02
深入學習jQuery中的data()
大家應該都會有這樣一種感覺，data函數(shù)在jQuery中看起來很不起眼, 就像沙灘上一顆平凡的沙子, 但仔細一瞅, 卻驚訝的發(fā)現(xiàn)data是jQuery中無比重要的一環(huán), 甚至jQuery中各種事件都基于此。下面就來詳細深入的學習下jQuery中的data()，感興趣的朋友們可以參考借鑒。
2016-12-12
jQuery插件HighCharts實現(xiàn)氣泡圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)氣泡圖效果,結合完整實例形式分析了jQuery插件HighCharts繪制氣泡圖的實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
jQuery Easyui datagrid editor為combobox時指定數(shù)據(jù)源實例
當在datagrid行內(nèi)部應用添加編輯操作時，引入combobox是非常方便的操作，這篇文章主要介紹了jQuery Easyui datagrid editor為combobox時指定數(shù)據(jù)源實例，有興趣的可以了解一下。
2016-12-12
JQuery獲取各種寬度、高度(format函數(shù))實例
本例除了使用標準的JQuery類庫外，還添加了自定義的函數(shù)來進行字符串的format操作。
2013-03-03
使用jquery實現(xiàn)仿百度自動補全特效
這里給大家分享的效果是像百度的搜索框一樣，當用戶在文本框輸入前幾個字母或是漢字的時候,該控件就能從存放數(shù)據(jù)的文或是數(shù)據(jù)庫里將所有以這些字母開頭的數(shù)據(jù)提示給用戶,供用戶選擇,提供方便，增加用戶體驗。
2015-07-07
jquery簡單實現(xiàn)帶漸顯效果的選項卡菜單代碼
這篇文章主要介紹了jquery簡單實現(xiàn)帶漸顯效果的選項卡菜單代碼,可實現(xiàn)tab選項卡切換過程中帶有漸顯效果,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09