一個(gè)基于jQuery的樹型插件(OrangeTree)使用介紹
更新時(shí)間：2012年05月03日 19:54:10 作者：
這個(gè)樣式大家就將就一下吧！我將這個(gè)無限級(jí)樹型插件命名為桔子樹，需要的朋友可以參考下
OrangeTree
下載地址：OrangeTree
首先大家先看下演示吧！
首先聲明本人美術(shù)功底比較差！這個(gè)樣式大家就將就一下吧！我將這個(gè)無限級(jí)樹型插件命名為桔子樹，它主要就分為3個(gè)級(jí)別的節(jié)點(diǎn)：
首級(jí)菜單，就是樹上的一級(jí)菜單
父級(jí)菜單，也就是下面還有節(jié)點(diǎn)的菜單
子級(jí)菜單，也就是下面沒有節(jié)點(diǎn)的菜單
每個(gè)節(jié)點(diǎn)都可以用CSS控制其樣式，詳細(xì)請(qǐng)看下表：
具體用法如下：
首先添加引用
<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
});
});
下載地址：OrangeTree
首先大家先看下演示吧！
首先聲明本人美術(shù)功底比較差！這個(gè)樣式大家就將就一下吧！我將這個(gè)無限級(jí)樹型插件命名為桔子樹，它主要就分為3個(gè)級(jí)別的節(jié)點(diǎn)：
首級(jí)菜單，就是樹上的一級(jí)菜單
父級(jí)菜單，也就是下面還有節(jié)點(diǎn)的菜單
子級(jí)菜單，也就是下面沒有節(jié)點(diǎn)的菜單
每個(gè)節(jié)點(diǎn)都可以用CSS控制其樣式，詳細(xì)請(qǐng)看下表：
|
OrangeTree | |
| .OrangeTree | 控件 |
| .first_node | 首級(jí)菜單的默認(rèn)樣式 |
| .first_node_hover | 首級(jí)菜單鼠標(biāo)移上的樣式 |
| .first_node_click | 首級(jí)菜單鼠標(biāo)點(diǎn)擊后的樣式 |
| .first_node_subItem | 首級(jí)菜單下的子級(jí)菜單樣式 |
| .Item | 父級(jí)菜單 |
| .Item_node | 父級(jí)菜單默認(rèn)樣式 |
| .Item_node_hover | 父級(jí)菜單鼠標(biāo)移上的樣式 |
| .Item_node_click | 父級(jí)菜單鼠標(biāo)點(diǎn)擊后的樣式 |
| .Item_Img_bg | 父級(jí)菜單圖標(biāo)樣式 |
| .subItem | 子級(jí)菜單 |
| .subItem span | 子級(jí)菜單默認(rèn)樣式 |
| .subItem_node_hover | 子級(jí)菜單鼠標(biāo)移上的樣式 |
| .subItem_node_click | 子級(jí)菜單鼠標(biāo)點(diǎn)擊后的樣式 |
| .subItem_Img_bg | 子級(jí)菜單圖標(biāo)樣式 |
| 注：注釋為(*)的樣式建議不要修改 | |
JavaScript參數(shù)說明：
| OrangeTree | |
| width | 控件寬度 |
| height | 控件高度 |
| indent | 層級(jí)縮進(jìn) |
| view | 初始顯示方式,expanded:全部打開,collapsed:全部關(guān)閉,firstNode:指定顯示首級(jí)的第幾級(jí)(firstNode指定) |
| firstNode | view為firstNode此屬性指定顯示首級(jí)的第幾級(jí) |
| single | 指定顯示方式，是否只能開打一級(jí)目錄 |
首先添加引用
復(fù)制代碼 代碼如下:
<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
復(fù)制代碼 代碼如下:
<div class="OrangeTree">
<ul>
<li>……</li>
……
</ul>
</div>
Javascript
復(fù)制代碼 代碼如下:
$(document).ready(function() {
$(".OrangeTree").OrangeTree({
width:"300px",
height:"500px",
indent:20,
view: "collapsed",
firstNode: 1,
single:false
});
});
您可能感興趣的文章:
- jquery ztree實(shí)現(xiàn)下拉樹形框使用到了json數(shù)據(jù)
- jquery.simple.tree插件 更簡(jiǎn)單，兼容性更好的無限樹插件
- 推薦8款jQuery輕量級(jí)樹形Tree插件
- 無限樹Jquery插件zTree的常用功能特性總結(jié)
- Jquery 實(shí)現(xiàn)彈出層插件
- 限制上傳文件大小和格式的jQuery插件實(shí)例
- 自己動(dòng)手手寫jQuery插件總結(jié)
- 推薦一款jQuery插件模板
- zTree插件之單選下拉菜單實(shí)例代碼
- zTree插件之多選下拉菜單實(shí)例代碼
- jquery zTree異步加載簡(jiǎn)單實(shí)例分享
- js樹插件zTree獲取所有選中節(jié)點(diǎn)數(shù)據(jù)的方法
相關(guān)文章
精心挑選的15款優(yōu)秀jQuery 本特效插件和教程
今天這篇文章向大家分享15款精心挑選的優(yōu)秀 jQuery 文本特效插件，都帶有詳細(xì)的使用教程。jQuery 是最流行和使用最廣泛的 JavaScript 框架，它簡(jiǎn)化了 HTML 文檔遍歷，事件處理，動(dòng)畫以及Ajax交互，幫助 Web 開發(fā)人員更快速的實(shí)現(xiàn)各種精美的界面效果2012-08-08
jquery 全選實(shí)現(xiàn)代碼。2009-04-04
除了全局函數(shù)外，jquery中的大多數(shù)插件都是通過jquery對(duì)象的方法提供的2012-08-08
jQuery的插件提供了一個(gè)很好的方法，節(jié)省了時(shí)間和簡(jiǎn)化了開發(fā)，避免程序員從頭開始編寫每個(gè)組件。但是，插件也將一個(gè)不穩(wěn)定因素引入代碼中。一個(gè)好的插件節(jié)省了無數(shù)的開發(fā)時(shí)間，一個(gè)質(zhì)量不好的插件會(huì)導(dǎo)致修復(fù)錯(cuò)誤的時(shí)間比實(shí)際從頭 開始編寫組件的時(shí)間還長(zhǎng)。2014-09-09
今天針對(duì)這個(gè)JQuery里面的toggle聊幾句，文章中涉及到了一些問題望牛牛們能幫忙解惑一下。2009-11-11
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)儀表盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
EXT體積大,jQuery更專注于簡(jiǎn)化最基礎(chǔ)的開發(fā)工作.所以使用起來,也就感覺更像是使用原始的js進(jìn)行開發(fā)一樣2010-04-04
jQuery動(dòng)態(tài)增減行的實(shí)例代碼解析(推薦)
這篇文章主要介紹了jQuery動(dòng)態(tài)增減行的實(shí)例代碼解析,本文圖文并茂給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
教你用jquery實(shí)現(xiàn)iframe自適應(yīng)高度
iframe因?yàn)槟芎途W(wǎng)頁(yè)無縫的結(jié)合從而不刷新頁(yè)面的情況下更新頁(yè)面的部分?jǐn)?shù)據(jù)成為可能，可是 iframe的大小卻不像層那樣可以“伸縮自如”，所以帶來了使用上的麻煩，給iframe設(shè)置高度的時(shí)候多了也不好，少了更是不行，今天我們就來分享2種使用jquery實(shí)現(xiàn)iframe自適應(yīng)高度的代碼2014-06-06
這篇文章主要介紹了基于bootstrap3和jquery的分頁(yè)插件的相關(guān)資料,需要的朋友可以參考下2015-07-07