JavaScript NodeTreeナビゲーションバー(メニュー項目JSON型/自作)_JavaScriptスキル

最近暇なので、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: 親ノードのみがこの属性を持つ、子ノードがデフォルトで展開されるかどうか、ファイル:子ノードのみがこの属性を持ちます。
の後にページが開かれました{ id: 1, pId: 0, name: "Parent Node One", img: "CSS/Images/001.png", open: true }をクリックします。
{ id: 101、pId : 1、名前: "サブノード 1"、画像: "CSS/Images/002.png"、ファイル: "http://www.cnblogs.com/nnzfly/" }//データの最後の行を末尾のカンマに追加しないでください。そうしないと、IE でエラーが報告されます。
]

4. NodeTree を表示する場所に次のコードを追加します:

コードをコピーします コードは次のとおりです:

5.次のコードをページに追加します:

コードをコピー コードは次のとおりです:

< ;script type="text/javascript"> ;
$(function () {
NodeTree("mainFrame");
});
2):
< script type="text/javascript">
window.onload=function (){
NodeTree("mainFrame")
;

NodeTree("mainFrame") では、mainFrame は左側のフレームにあるターゲット フレームの名前です。右側に表示されるのは=「mainFrame」です。
本当にわからない場合は、demo.htm のコードを見ていただければわかります。
ソースコードが添付されていますので、興味があればご覧ください~
http://dl.vmall.com/c0b7wda1ps
気に入ったらクリックして推奨してください。あなたのサポートは私のサポートです最大のモチベーション！