dtree を使用してツリー メニューを実装する dtree の使用法_ナビゲーション メニュー

準備:
スクリプト ホームから dtree.zip ファイルをダウンロードしてくださいhttp://www.jb51.net/jiaoben/31974.html
dtree.zip 圧縮パッケージの概要:
dtree は JavaScript で書かれたシンプルなツリー メニュー コンポーネントで、現在は無料でオープン ソースです。
現在、ツリーメニューコンポーネント(extなど)が多数ありますが、dtreeはシンプルでわかりやすいjsコンポーネントであり、データベースからの動的導入をサポートしています。 🎜>解凍 次の部分があります。
img フォルダ: ツリー メニューを表示するために必要なアイコンが含まれています
api.html: 著者が作成した dtree ヘルプ ドキュメント
dtree.css: ツリー メニュー スタイル
dtree .js: js コア ファイル、コードはすべてその中にあります
example01.html: ツリー メニュー インスタンスのメイン メソッドの紹介 dtree:
dtree のメイン メソッドの紹介:
add(parameters) ): ツリーノードの追加、実際のパラメータ 9 個あります add(id,pid,name,url,title,target,icon,iconOpen,open);
位置パラメータのエイリアス型関数
1 id int ノード自身の ID (ユニーク)
2 pid int ノードの親ノードID
3 name string ページに表示されるノードの名前
4 url​​ string ノードのリンクアドレス
5 title string ノード上にマウスを置いたときに表示されるプロンプト情報
6 target string ノードリンクによって開かれたターゲットフレーム
7 icon string ノードを閉じたときに表示されるアイコン
8 iconOpen string 表示されるアイコンノードが開いているとき
9 open bool 初めてロードされるときにノードが開かれるかどうか
注 : dtree.js ファイルには、いくつかのデフォルトのイメージのパスが含まれています。イメージとパスは自分で構成できます。私がダウンロードしたものは 44 ～ 57 行目です。
openAll() はすべてのノードを開き、ツリー オブジェクトの作成前または作成後に呼び出すことができます。
を呼び出すことができます。 openTo(id,select) は、指定された ID を持つノードを開くためにツリー オブジェクトが作成される前または後に、次の 2 つのパラメーターを渡すことができます:
id は、開く必要がある一意のノード ID
を選択します。ノードを選択状態にする
config 構成
変数タイプ デフォルト値の説明
ターゲット文字列 すべてのノードのターゲット
folderLinks bool true フォルダーをリンクできます
useSelection bool true ノードを選択してハイライト表示できます
useCookies bool true ツリーは Cookie を使用してステータスを記憶できます
useLines bool true 構造接続線を含むツリーを作成します
useIcons bool true チャートを含むツリーを作成します
useStatusText bool false ステータス バーに表示されるノード URL をノード名
closeSameLevel bool false 兄弟ノードは 1 つのノードのみを開くことができます
inOrder bool false 親ノード ツリーの表示を高速化します
例:tree.config.closeSameLevel =true; を意味します。特定のレベルのノードが開かれると、そのレベルの同じレベルにある他の開いているノードも閉じられます
サンプル コード:

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

<リンク rel ="StyleSheet" href="dtree.css" type="text/css" />

/html>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。