dtree を使用してツリーメニューを実装する dtree の使用法_ナビゲーションメニュー-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:00:44

オリジナル

1739 人が閲覧しました

準備:
スクリプトホームから 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>

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

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