javascriptライブラリ「UIDirectory」なるものを作ってみた。

2009年12月12日

追記　：　非同期処理が困難な点、addChild、removeChildを繰り返していると色々と破綻する点など実用性は無いので利用を考えている方はご注意ください＾＾；
また、UIDirectory | UIItem 内部にElementを保持するタイプのものも途中まで作ったのですが、ul、li要素を内部的に使用すると構造上、完全には対の関係ではなくなってしまうので、色々と手間取ってます。div要素あたりを使えば完全な対にできるのである程度楽に作れるとは思いますが、時間もあまりないので余裕ができるまで作業中断します。。。ご了承ください。

javascriptライブラリ「UIDirectory」を勉強がてら作ってみました。色々と穴がありますが習作ということで。どういうものかはjavascriptライブラリ「UIDirectory」サンプルページをごらん頂いたほうが早いでしょう。

簡単な使い方だけご説明します。


//最もシンプルな例です。
var folder = new UIDirectory("フォルダ"); //1.フォルダを作成します。
var file = new UIItem("ファイル"); //2.ファイルを作ります。
folder.addChild(file); //3.フォルダにファイルを追加します。

document.write(folder.createHTML()); //フォルダをHTMLの指定箇所に出力します。

実行結果はこんな感じになります。

しかし、これだけでは物足りないですよね。ファイルをクリックしたらリンク先に飛ぶようにしましょう。


var folder = new UIDirectory("フォルダ"); 
var file = new UIItem("yahoo","http://yahoo.co.jp"); //第２引数にURL設定
//URLの設定はhrefプロパティに直接代入可能 例）　file.href = "http://yahoo.co.jp";
file.target = "_blank"; //おこのみでウィンドウターゲットをblankに指定
folder.addChild(file); 

document.write(folder.createHTML());

見事にリンクが動作するようになりました！最後に概観の変更とカスタム関数の設定をしてみましょう。


//フォルダとファイルのアイコンタイプをテキストに変更します。
UISetting.icon.directoryIconType = "text"; // image or text
UISetting.icon.itemIconType = "text"; // image or text

//アイコンに使用するテキストを設定します。
//各値はデフォルトで設定されているので、今回はコメントアウトしておきます。
//UISetting.icon.directoryOpenIconText = "□";
//UISetting.icon.directoryCloseIconText = "■";
//UISetting.icon.itemIconText = "*";

//クリック時の動作を拡張します。
var tmp = UISetting.func.onClickItem; //デフォルト値を一時退避
UISetting.func.onClickItem =  function(elem,obj){
	//elem : イベントが発生したHTMLエレメント
	//obj : elemに対応するUIItemインスタンス

	alert(obj.href+"にジャンプします"); //新しく追加された挙動。
	tmp(elem,obj); //デフォルトのメソッドを実行します。
};

//ちなみにUISettingの値は
//UIDirectoryとUIItemのプロパティのデフォルト値をして使用されます。
//また、UIDirectory、UIItemインスタンス生成後にUISettingの値を変更しても
//これらには反映されません。

var folder = new UIDirectory("フォルダ"); 
var file = new UIItem("yahoo","http://yahoo.co.jp");
file.target = "_blank";
file.iconText = "->"; //インスタンス単位でテキストアイコンを設定します
folder.addChild(file); 

document.write(folder.createHTML()); //フォルダをHTMLの指定箇所に出力します。

詳しい使い方はjavascriptライブラリ「UIDirectory」サンプルページとUIDirectory.jsの下部の簡易マニュアルを参考にしてみてください。アイコンの画像を変更したりクリック時やマウスオーバー時の挙動をカスタム関数で変更することも可能です（テスト不足なので何が起こるかは保障しませんが...）。
是非ご利用ください。

UIDirectory.js(zip)をダウンロードする