使用方法
1、将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用。
2、引用JQuery框架。
3、修改NodeTree-JSON.js中的NodeT">
首頁 > web前端 > js教程 > JavaScript NodeTree導覽列(選單項目JSON類型/自製)_javascript技巧

JavaScript NodeTree導覽列(選單項目JSON類型/自製)_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-05-16 17:42:29
原創
1435 人瀏覽過

最近比較清閒,我做了個JavaScript NodeTree,網路上類似的東西其實還挺多的,功能也比這個全,我做這個純粹為了練練手。

圖示可以自訂(16X16),選單項目完全是JSON類型定義的,方便修改。
介面
JavaScript NodeTree導覽列(選單項目JSON類型/自製)_javascript技巧
使用方法
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的地方添加如下代碼: 複製代碼

程式碼如下:



5、在頁面中加入以下程式碼: 複製程式碼

程式碼如下:


或是(二者任選其一):
}




NodeTree("mainFrame ") 中,mainFrame是目標frame的name,例如導覽列在左邊的frame裡,右邊顯示的frame的name=「mainFrame」。
實在不懂看看demo.htm的程式碼,就懂了。 附上原始碼,有興趣的可以看看~ http://dl.vmall.com/c0b7wda1ps 喜歡請點一下推薦,你的支援是我最大的動力!
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板