COOLjsTree ドキュメント

  1. はじめに
  2. ツリー名
  3. 必要なファイル
  4. ツリー定義
  5. 視覚効果
  6. ページの追加

はじめに

COOLjsTreeスクリプトは多様なブラウザに対応した, 驚くほど簡単で高性 能な, フレキシブルなツリーナビゲーションメニューです. 次のような特徴が あります:

  • よく使われるすべてのブラウザに対応(IE4以上, NS4以上, Mozilla, Opera)
  • セットアップも利用も簡単
  • 各レベルに異なるスタイルを使いながら, 無制限の深さを設定で きる
  • 同一のページにいくつでもツリーを表示でき, それぞれが自由に 設定できる
  • 自由にレベルを設定できる. 各レベルごとに異なるインデントと スタイルを指定できる
  • あらゆるスタイルに対応でき, 洗練された視覚効果が得られる
  • 自由にノードを設定でき, 好きなようにアイテムを利用できる
  • javascriptから実行時にアクセス
  • 軽い動作で高いパフォーマンス
メニューは以下のブラウザのテストに合格しています:
  • Internet Explorer 4.01; 5.01; 5.5; 6.0
  • Netscape 4.51, 4.7, 6.2
  • Moizlla 0.9.7
  • Opera 5.02; 5.12; 6.0

ツリー名

ページ上で複数のCOOLjsTreeのインスタンスを利用するために, 各ツリー に固有の名前をつける必要があります(例: MainTree, Tree1, Tree2, COOLjsTreeTheBest, など). このドキュメントではTree1という名前を 使います.

必要なファイル

COOLjsTreeのインストールされたwebサイトのメンテナンスを簡単にするた め, 多くの場合いくつかのファイルが必要となります.

  • cooltree.js: COOLjsTreeクラス宣言. 変更する必要なし. ページごとに1つ必要.
  • tree_nodes.js: ツリー構造. ツリーごとに1つ必要.
  • tree_format.js: ツリーの視覚効果. ツリーごとに1つ必要.
  • cooltree.css: COOLjsTreeノードのためのスタイルシー ト(メインのCSSファイルでスタイルを定義できる).

ツリー構造

ツリーのノードはメニューツリーとその関係を決めるツリー要素を表現す るJavaScrpitの構造です. アイテムの個々のパラメータはこの構造内で設定で きます.

多くの場合, 個々のファイルで定義されるツリー構造は tree1_node.jsのような名前をもつファイルで定義されます.

構造はルートアイテムの一覧として配列に格納されます. 各アイテムは3個 以上の要素を含む配列そのものです. これらの要素は以下のようになっていま す:

  • 0 - 見出し
  • 1 - リンク
  • 2 - ターゲットフレーム
  • 3+ - サブアイテム
リンクやターゲットが定義されていない場合, ヌル値とされます. 以下のコー ド例を参考にしてください.

見出し

見出しはアイテムの矩形内で表示されるテキストやhtmlを定義します.

リンク

アイテムのアンカータグのhref属性に挿入されるテキストを定義します. 通常ここにはページのURLが入りますが, 好きな値を代入できます.

ターゲットフレーム

フレーム内でCOOLjsTreeを使う場合, 各リンクのターゲットフレームを指 定する必要があります.

サブアイテム

アイテムには好きなだけサブアイテムを含ませることができます. すべて のサブアイテムはアイテム自身の生成に使われるものと同じルールを使います. 以下のコード例を参照してください.

例

var TREE1_NODES = [
	['Node 1', null, null,
		['Sub Item 1', 'item1.html', "_blank"],
		['Level 2', null, null,
			['Sub Item 2', 'subitem2.html', "mainframe"],
			['Sub Item 3', 'subitem3.html', "mainframe"],
			['Sub Item 4', 'subitem4.html', "mainframe"],
		],
	],
	['Node 2', null, null,
		['Level 2 Node 1', null, null,
			['Sub Item 2', 'subitem2.html', null],
			['Sub Item 3', 'subitem3.html', null],
			['Sub Item 4', 'subitem4.html', null],
		],
	]
];

注意.括弧と引用符の使用には注意しましょう. 必ず閉じておく必 要があります.

視覚効果

COOLjsTreeを的確に初期化しておく必要があります. ツリーの書式は定義 された構造のJavaScript変数です. デフォルトではtree1_format.jsで 定義されています.

定義

  1. 整数. 左位置.
  2. 整数. 上位置. COOLjsTreeは絶対位置を指定するときにはツリーメニュー の左および上位置を指定する.

  3. ブーリアン. 真なら子ノードをもつノードに+/-ボタンをつける.

  4. 配列. パラメータ2.が真の場合, +/-ボタンのための画像を3つ(閉じる/開 く/空白)用意する. デフォルトでは空白画像は透過1x1 gif画像である.

  5. 配列. 定義済み画像を指定する. (0を指定すると3つめ(空白)の画像とな り, インデントされる)

  6. ブーリアン. 真なら子をもつノードにはフォルダ画像が, そして子をもた ないノードには文書画像が表示される.

  7. 配列. パラメータ5が真ならフォルダと文書画像として用いられる3つ(閉 じる/開く/文書)の画像を指定する.

  8. 配列. 前の画像の大きさ(幅/高さ)を指定する.

  9. 配列. ツリーの各レベルのインデント. すべてのレベルの下げ幅を指定す ること(例. [0,16,32,48,64,80,96])

  10. 文字列. ツリー背景色 ("" - 透明)

  11. 文字列. すべてのノードに対するデフォルトCSS.

  12. 配列. ツリーの各レベルのスタイル(未定義レベルにはデフォルトスタイ ルが適用される). 例: ["clsNodeL0","clsNodeL1","clsNodeL2","clsNodeL3","clsNodeL4"]. 詳細は demoを参照すること.

  13. ブーリアン. 真ならツリーの枝が1つだけの場合は自動的に開かれる.

  14. 配列. 各アイテムのパディング. 例: [0,2].

注意:パラメータの順番を守ること.

tree1_format.jsの例

var TREE1_FORMAT =
[
//0. 左位置
	12,
//1. 上位置
	74,
//2. +/-ボタンの表示
	true,
//3. ボタン画像 (閉じる/開く/空白)
	["../img/c.gif", "../img/e.gif", "../img/b.gif"],
//4. 画像サイズ (子のないノードの幅, 高さ, インデント)
	[16,16,16],
//5. フォルダ画像表示
	true,
//6. フォルダ画像 (閉じる/開く/空白)
	["../img/books/fc.gif", "../img/books/fe.gif", "../img/books/i.gif"],
//7. 画像サイズ (幅, 高さ)
	[16,16],
//8. 各レベルのインデント [0/*第1レベル*/, 16/*第2*/, 32/*第3*/,...]
	[0,16,32,48],
//9. ツリー背景色 ("" - 透明)
	"",
//10. ノードのデフォルトスタイル
	"clsNode",
//11. 各レベルのスタイル (未定義ならデフォルト適用)
	[],//["clsNodeL0","clsNodeL1","clsNodeL2","clsNodeL3","clsNodeL4"],
//12. 枝が1つのときに自動展開
	false,
//13. アイテムのパディングとスペーシング
	[0,2],
];

ページにツリーを追加する

あなたのサイトにCOOLjsTreeによるツリーメニューを追加するには以下の手順 に従いましょう.
  1. メニューを選ぶ. 例: Tree1.

  2. 個別のファイルでツリー構造を定義する. 例: tree1_nodes.js内の変数 TREE1_NODES.

  3. 個別のファイルでツリーの書式を選ぶ. 例: tree1_format.js内の変数 TREE1_FORMAT.

  4. メインスタイルシートまたは個別ファイルでCSSスタイルを定義する.

  5. 以下のようにして必要なファイルをすべてページにリンクする:
    <head>
	<link href="/css/cooltree.css" rel="stylesheet" type="text/css">
	<script language="JavaScript" src="/js/cooltree.js"></script>
	<script language="JavaScript" src="tree1_nodes.js"></script>
	<script language="JavaScript" src="tree1_format.js"></script>
<head/>
  6. </body>タグの前に<script>タグでコードを指定する. 例: 
    <script language="JavaScript">
	var treeName = "Tree1";
	new COOLjsTree (treeName, TREE1_NODES, TREE1_FORMAT);
</script>
  7. ブラウザでページを開いて楽しみつつ, 登録すること を考える.
Copyright © 1997-2002 CoolDev.Com, All Rights Reserved.