使用方法
1、将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用。
2、引用JQuery框架。
3、修改NodeTree-JSON.js中的NodeT">

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

WBOY
リリース: 2016-05-16 17:42:29
オリジナル
1399 人が閲覧しました

最近暇なので、JavaScript の NodeTree を自分で作りました。実際、インターネット上には似たようなものがたくさんあり、これよりも多くの機能が備わっています。純粋にスキルを練習するためにこれを作りました。

アイコンはカスタマイズ可能 (16X16) で、メニュー項目は完全に JSON タイプで定義されているため、簡単に変更できます。
インターフェース:
JavaScript NodeTreeナビゲーションバー(メニュー項目JSON型/自作)_JavaScriptスキル
使用法 :
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
気に入ったらクリックして推奨してください。あなたのサポートは私のサポートです最大のモチベーション!
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!