最近比較清閒,我做了個JavaScript NodeTree,網路上類似的東西其實還挺多的,功能也比這個全,我做這個純粹為了練練手。
圖示可以自訂(16X16),選單項目完全是JSON類型定義的,方便修改。
介面:
使用方法:
1、將NodeTree-JSON.js、CSS資料夾複製到專案中並引用。
2、引用JQuery框架。
3、修改NodeTree-JSON.js中的NodeTreeMenu選單項,以下是簡單說明。
var NodeTreeMenu = [
var NodeTreeMenu = [
/id:var 節點節點ID,pId:父節點Id,沒有父節點則為0,name:顯示名稱,img:顯示圖標,open:只有父節點存在此屬性,子節點預設是否展開,file:只有子節點由此屬性,點擊後面開啟的頁面
{ id: 1, pId: 0, name: "父節點一", img: "CSS/Images/001.png", open: true },
{ id: 101, pId : 1, name: "子節點一", img: "CSS/Images/002.png", file: "http://www.cnblogs.com/nnzfly/" }//注意最後一行資料結尾一定不能加逗號!否則IE下報錯誤!
]
4、在要顯示NodeTree的地方添加如下代碼: 複製代碼
程式碼如下:
程式碼如下:
或是(二者任選其一):
}
NodeTree("mainFrame ") 中,mainFrame是目標frame的name,例如導覽列在左邊的frame裡,右邊顯示的frame的name=「mainFrame」。
實在不懂看看demo.htm的程式碼,就懂了。 附上原始碼,有興趣的可以看看~ http://dl.vmall.com/c0b7wda1ps 喜歡請點一下推薦,你的支援是我最大的動力!