DIV CSS 佈局教程網

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

圖標可以自定義（16X16），菜單項完全是JSON類型定義的，方便修改。
界面：

使用方法：
1、將NodeTree-JSON.js以及CSS文件夾復制到項目中並引用。
2、引用JQuery框架。
3、修改NodeTree-JSON.js中的NodeTreeMenu菜單項，以下是簡單說明。
復制代碼 代碼如下:
var NodeTreeMenu = [
//id:節點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的地方添加如下代碼：
復制代碼 代碼如下:
<ul id="NodeTree-JSON">
</ul>

5、在頁面中添加如下代碼：
復制代碼 代碼如下:
<script type="text/javascript">
$(function () {
NodeTree("mainFrame");
});
</script>或者是（二者任選其一）：
<script type="text/javascript">
window.onload=function (){
NodeTree("mainFrame");
}
</script>


NodeTree("mainFrame") 中，mainFrame是目標frame的name，比如說導航欄在左邊的frame裡，右邊顯示的frame的name=“mainFrame”。
實在不理解看看demo.htm的代碼，就明白了。
附上源代碼，感興趣的可以看看～
http://dl.vmall.com/c0b7wda1ps
喜歡請點一下推薦，你的支持是我最大的動力！