JavaScript NodeTree導(dǎo)航欄(菜單項(xiàng)JSON類型/自制)
更新時(shí)間：2013年02月01日 15:16:12 作者：
利用閑暇時(shí)間自己做了個(gè)JavaScript NodeTree，網(wǎng)上有很多類似的效果，本例主要是練練手，鞏固下知識(shí)，感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)NodeTree導(dǎo)航欄有所幫助,認(rèn)為好的就分享嘍
最近比較清閑，自己做了個(gè)JavaScript NodeTree，網(wǎng)上類似的東西其實(shí)挺多的，功能也比這個(gè)全，我做這個(gè)純粹為了練練手。
圖標(biāo)可以自定義（16X16），菜單項(xiàng)完全是JSON類型定義的，方便修改。
界面：
使用方法：
1、將NodeTree-JSON.js以及CSS文件夾復(fù)制到項(xiàng)目中并引用。
2、引用JQuery框架。
3、修改NodeTree-JSON.js中的NodeTreeMenu菜單項(xiàng)，以下是簡(jiǎn)單說(shuō)明。
var NodeTreeMenu = [
//id:節(jié)點(diǎn)ID，pId：父節(jié)點(diǎn)Id，沒(méi)有父節(jié)點(diǎn)則為0，name:顯示名稱，img:顯示圖標(biāo)，open:只有父節(jié)點(diǎn)存在此屬性，子節(jié)點(diǎn)默認(rèn)是否展開(kāi)，file:只有子節(jié)點(diǎn)由此屬性，點(diǎn)擊后打開(kāi)的頁(yè)面
{ id: 1, pId: 0, name: "父節(jié)點(diǎn)一", img: "CSS/Images/001.png", open: true },
{ id: 101, pId: 1, name: "子節(jié)點(diǎn)一", img: "CSS/Images/002.png", file: "http://www.cnblogs.com/nnzfly/" }//注意最后一行數(shù)據(jù)末尾一定不能加逗號(hào)！否則IE下報(bào)錯(cuò)！
]
4、在要顯示NodeTree的地方添加如下代碼：
<ul id="NodeTree-JSON">
</ul>
5、在頁(yè)面中添加如下代碼：
<script type="text/javascript">
$(function () {
NodeTree("mainFrame");
});
</script>或者是（二者任選其一）：
<script type="text/javascript">
window.onload=function (){
NodeTree("mainFrame");
}
</script>
NodeTree("mainFrame") 中，mainFrame是目標(biāo)frame的name，比如說(shuō)導(dǎo)航欄在左邊的frame里，右邊顯示的frame的name=“mainFrame”。
實(shí)在不理解看看demo.htm的代碼，就明白了。
附上源代碼，感興趣的可以看看～
http://dl.vmall.com/c0b7wda1ps
喜歡請(qǐng)點(diǎn)一下推薦，你的支持是我最大的動(dòng)力！
圖標(biāo)可以自定義（16X16），菜單項(xiàng)完全是JSON類型定義的，方便修改。
界面：
使用方法：
1、將NodeTree-JSON.js以及CSS文件夾復(fù)制到項(xiàng)目中并引用。
2、引用JQuery框架。
3、修改NodeTree-JSON.js中的NodeTreeMenu菜單項(xiàng)，以下是簡(jiǎn)單說(shuō)明。
復(fù)制代碼 代碼如下:
var NodeTreeMenu = [
//id:節(jié)點(diǎn)ID，pId：父節(jié)點(diǎn)Id，沒(méi)有父節(jié)點(diǎn)則為0，name:顯示名稱，img:顯示圖標(biāo)，open:只有父節(jié)點(diǎn)存在此屬性，子節(jié)點(diǎn)默認(rèn)是否展開(kāi)，file:只有子節(jié)點(diǎn)由此屬性，點(diǎn)擊后打開(kāi)的頁(yè)面
{ id: 1, pId: 0, name: "父節(jié)點(diǎn)一", img: "CSS/Images/001.png", open: true },
{ id: 101, pId: 1, name: "子節(jié)點(diǎn)一", img: "CSS/Images/002.png", file: "http://www.cnblogs.com/nnzfly/" }//注意最后一行數(shù)據(jù)末尾一定不能加逗號(hào)！否則IE下報(bào)錯(cuò)！
]
4、在要顯示NodeTree的地方添加如下代碼：
復(fù)制代碼 代碼如下:
<ul id="NodeTree-JSON">
</ul>
5、在頁(yè)面中添加如下代碼：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function () {
NodeTree("mainFrame");
});
</script>或者是（二者任選其一）：
<script type="text/javascript">
window.onload=function (){
NodeTree("mainFrame");
}
</script>
NodeTree("mainFrame") 中，mainFrame是目標(biāo)frame的name，比如說(shuō)導(dǎo)航欄在左邊的frame里，右邊顯示的frame的name=“mainFrame”。
實(shí)在不理解看看demo.htm的代碼，就明白了。
附上源代碼，感興趣的可以看看～
http://dl.vmall.com/c0b7wda1ps
喜歡請(qǐng)點(diǎn)一下推薦，你的支持是我最大的動(dòng)力！
您可能感興趣的文章:
- js實(shí)現(xiàn)頂部可折疊的菜單工具欄效果實(shí)例
- Extjs學(xué)習(xí)筆記之四 工具欄和菜單
- JS實(shí)現(xiàn)自動(dòng)固定頂部的懸浮菜單欄效果
- 基于vue.js實(shí)現(xiàn)側(cè)邊菜單欄
- 使用ReactJS實(shí)現(xiàn)tab頁(yè)切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果
- 簡(jiǎn)單實(shí)現(xiàn)js菜單欄切換效果
- 原生JS仿蘋果任務(wù)欄菜單，放大效果的菜單
- JS實(shí)現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼
- 非常酷的js圖形漸隱導(dǎo)航菜單欄
- JS實(shí)現(xiàn)左側(cè)菜單工具欄
相關(guān)文章
先聲明一些東西，消除歧義：這篇博文中的JavaScript是指一般意義上的JavaScript，并不只限定“自稱是JavaScript”的運(yùn)行環(huán)境2009-11-11
微信小程序?qū)崿F(xiàn)登錄注冊(cè)tab切換效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登錄注冊(cè)切換效果，簡(jiǎn)易版tab切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)音樂(lè)播放器，支持循環(huán)、隨機(jī)播放，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
微信小程序?qū)崿F(xiàn)的日期午別醫(yī)生排班表功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的日期午別醫(yī)生排班表功能,結(jié)合實(shí)例形式分析了微信小程序?qū)崿F(xiàn)基于日期時(shí)間、針對(duì)上午、下午、凌晨、夜間等時(shí)段的排班功能相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
詳解嵌套命名空間在TypeScript中如何應(yīng)用
命名空間是TypeScript中非常有用的概念，可以幫助我們組織和管理代碼，避免命名沖突，下面小編就來(lái)和大家聊聊嵌套命名空間在TypeScript中是如何應(yīng)用的吧2023-06-06
Bootstrap顯示與隱藏簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了bootstrap顯示與隱藏的簡(jiǎn)單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
uniapp微信小程序獲取當(dāng)前城市名稱逆地址解析實(shí)例教程
最近在用uni-app開(kāi)發(fā)小程序,需要獲取用戶所在城市,小程序本身沒(méi)有這樣的api,那么怎么實(shí)現(xiàn)呢?下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序獲取當(dāng)前城市名稱逆地址解析的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了JS自定義右鍵菜單實(shí)現(xiàn)代碼解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
使用AJAX實(shí)現(xiàn)Web頁(yè)面進(jìn)度條的實(shí)例分享
這篇文章主要介紹了使用AJAX實(shí)現(xiàn)Web頁(yè)面進(jìn)度條的實(shí)例分享,利用AJAX的異步來(lái)顯示服務(wù)器端的處理進(jìn)度是當(dāng)下比較流行的做法,需要的朋友可以參考下2016-05-05
在網(wǎng)上找了很多dom操作的例子，感覺(jué)不全而且凌亂。2010-04-04