快捷導(dǎo)航

JavaScript NodeTree導(dǎo)航欄(菜單項(xiàng)JSON類型/自制)

更新時(shí)間：2013年02月01日 15:16:12 作者：

利用閑暇時(shí)間自己做了個(gè)JavaScript NodeTree，網(wǎng)上有很多類似的效果，本例主要是練練手，鞏固下知識，感興趣的朋友可以了解下，或許對你學(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)，以下是簡單說明。

復(fù)制代碼代碼如下:

 
var NodeTreeMenu = [ 
//id:節(jié)點(diǎn)ID，pId：父節(jié)點(diǎn)Id，沒有父節(jié)點(diǎn)則為0，name:顯示名稱，img:顯示圖標(biāo)，open:只有父節(jié)點(diǎn)存在此屬性，子節(jié)點(diǎn)默認(rèn)是否展開，file:只有子節(jié)點(diǎn)由此屬性，點(diǎn)擊后打開的頁面 
{ 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ù)末尾一定不能加逗號！否則IE下報(bào)錯(cuò)！ 
] 

4、在要顯示NodeTree的地方添加如下代碼：

復(fù)制代碼代碼如下:

 
<ul id="NodeTree-JSON"> 
</ul> 

5、在頁面中添加如下代碼：

復(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，比如說導(dǎo)航欄在左邊的frame里，右邊顯示的frame的name=“mainFrame”。
實(shí)在不理解看看demo.htm的代碼，就明白了。
附上源代碼，感興趣的可以看看～
http://dl.vmall.com/c0b7wda1ps
喜歡請點(diǎn)一下推薦，你的支持是我最大的動力！

您可能感興趣的文章: