jQuery File Tree

このところジョウビタキ（通称ウチのヤツ）とjQueryだらけになっているこのごろ、またしてもjQueryプラグインのお話。

アップロードとダウンロード＆ディレクトリ管理を考えて、表示にはjQuery File Tree、アップロードにはjqUploaderを試しました。


まずはFile Tree。
これ、良くできてます。
・Linux GNOME風のファイルツリー表示がファンシー
・フォルダやファイルアイコンの変更が容易
・拡張子への対応もスタイルシートをちょちょいといじるだけでOK
・ページへの組み込みが簡単（jQueryプラグイン全体に言える事ですが）

欠点は、
・最終選択ファイルの情報しか吐き出さない

個人的にはディレクトリ管理も視野に入れていたので、「フォルダ選択時にフォルダの情報も吐き出してくれたらなぁ」なんて思ったりもしました。※もしかすると吐き出させる方法があるかもしれません。


jQuery File TreeにしてもjqUploaderにしても、phpと組んでサーバ内部とやりとりしています。jqUploaderの場合はFlashを使ってローカルとの橋渡しまでしていて、構成は結構複雑だったりします。


jQuery File Treeの基本的なところを押さえておきます。

$(document).ready( function() {

    $('#container_id').fileTree({

      root: '/some/folder/',

      script: 'jqueryFileTree.asp',

      expandSpeed: 1000,

      collapseSpeed: 1000,

      multiFolder: false

    }, function(file) {

        alert(file);

    });

});

この「.fileTree({」以下のJSON形式で指定されている部分が設定値ですね。
以下のようなオプションがあります。

root : 最初に表示されるディレクトリ : デフォ＝/(root)
script : サーバサイドのAjaxファイルのパス : デフォ＝jqueryFileTree.php
folderEvent : フォルダの開閉のトリガー : デフォ＝click（シングルクリック）
expandSpeed : フォルダを開くときの速度 : デフォ＝500(ms) ※-1でアニメーションなし
collapseSpeed : フォルダを閉じるときの速度 : デフォ＝500(ms) ※-1でアニメーションなし
expandEasing : フォルダを開くときのイージング : デフォ＝None
collapseEasing : フォルダを閉じるときのイージング : デフォ＝None
multiFolder : フォルダを複数開かせるか : デフォ＝true（開かせる）
loadMessage : ツリーをロード中に表示するメッセージ : デフォ＝Loading...


注意点はroot。
phpの設定かどうかは調べていませんが、デフォのままだとwwwルートではなくサーバのルートから表示してしまいます。
正しいパスを絶対パスで設定しなきゃならなりません。
でも、絶対パスがバレてしまいます。
見えるところに置かれかねないJavaScript、できるだけ隠す工夫をした方がイイですよ！

でもって、８行目のfunction(file)。file変数に選択したファイルのパスが代入されます。※もちろんfileという名前じゃなくてOK
その先は関数に振るのも良し、その中で処理して完結させるのも良し。


アイコンを変更する、あるいはFile Treeが認識しないファイル（拡張子）については、「jqueryFileTree.css」のココ↓

/* File Extensions*/
.jqueryFileTree LI.ext_3gp { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_afp { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_afpa { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_asp { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_aspx { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_avi { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_bat { background: url(images/application.png) left top no-repeat; }
.jqueryFileTree LI.ext_bmp { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_c { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_cfm { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_cgi { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_com { background: url(images/application.png) left top no-repeat; }
.jqueryFileTree LI.ext_cpp { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_css { background: url(images/css.png) left top no-repeat; }
.jqueryFileTree LI.ext_doc { background: url(images/doc.png) left top no-repeat; }
.jqueryFileTree LI.ext_exe { background: url(images/application.png) left top no-repeat; }
.jqueryFileTree LI.ext_gif { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_fla { background: url(images/flash.png) left top no-repeat; }
.jqueryFileTree LI.ext_h { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_htm { background: url(images/html.png) left top no-repeat; }
.jqueryFileTree LI.ext_html { background: url(images/html.png) left top no-repeat; }
.jqueryFileTree LI.ext_jar { background: url(images/java.png) left top no-repeat; }
.jqueryFileTree LI.ext_jpg { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_jpeg { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_js { background: url(images/script.png) left top no-repeat; }
.jqueryFileTree LI.ext_lasso { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_log { background: url(images/txt.png) left top no-repeat; }
.jqueryFileTree LI.ext_m4p { background: url(images/music.png) left top no-repeat; }
.jqueryFileTree LI.ext_mov { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_mp3 { background: url(images/music.png) left top no-repeat; }
.jqueryFileTree LI.ext_mp4 { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_mpg { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_mpeg { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_ogg { background: url(images/music.png) left top no-repeat; }
.jqueryFileTree LI.ext_pcx { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_pdf { background: url(images/pdf.png) left top no-repeat; }
.jqueryFileTree LI.ext_php { background: url(images/php.png) left top no-repeat; }
.jqueryFileTree LI.ext_png { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_ppt { background: url(images/ppt.png) left top no-repeat; }
.jqueryFileTree LI.ext_psd { background: url(images/psd.png) left top no-repeat; }
.jqueryFileTree LI.ext_pl { background: url(images/script.png) left top no-repeat; }
.jqueryFileTree LI.ext_py { background: url(images/script.png) left top no-repeat; }
.jqueryFileTree LI.ext_rb { background: url(images/ruby.png) left top no-repeat; }
.jqueryFileTree LI.ext_rbx { background: url(images/ruby.png) left top no-repeat; }
.jqueryFileTree LI.ext_rhtml { background: url(images/ruby.png) left top no-repeat; }
.jqueryFileTree LI.ext_rpm { background: url(images/linux.png) left top no-repeat; }
.jqueryFileTree LI.ext_ruby { background: url(images/ruby.png) left top no-repeat; }
.jqueryFileTree LI.ext_sql { background: url(images/db.png) left top no-repeat; }
.jqueryFileTree LI.ext_swf { background: url(images/flash.png) left top no-repeat; }
.jqueryFileTree LI.ext_tif { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_tiff { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_txt { background: url(images/txt.png) left top no-repeat; }
.jqueryFileTree LI.ext_vb { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_wav { background: url(images/music.png) left top no-repeat; }
.jqueryFileTree LI.ext_wmv { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_xls { background: url(images/xls.png) left top no-repeat; }
.jqueryFileTree LI.ext_xml { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_zip { background: url(images/zip.png) left top no-r

拡張子を追加したいなら、例えば.JPGという拡張子のjpeg、
.jqueryFileTree LI.ext_JPG { background: url(images/picture.png) left top no-repeat; }
という行を追加します。コピペで追加して、ちょちょいと変えればOK。
アイコンを変更したいなら、
.jqueryFileTree LI.ext_zip { background: url(images/zip.png) left top no-r
を変更するか、その画像ファイル自体を上書きすればOKです。


このように開発者＆ユーザーフレンドリーなjQuery File Treeですが、データベース連動型レコード（当然Ajax流の非同期）に適用するにはどうしたら？？

そう、とてもエレガントなプラグインでありながら、JavaScript系で悩んでしまうのはこの辺だったりします。

headタグに書き込むにしても、ページを読み込んで実行した段階で該当要素がないと、全く知らんぷり。
この辺はスタイルシートとは全く異なります。

じゃぁ、動的に書き出されたhtmlのbody内にscriptタグを組み込む？？
ひとまず解決なんですが、ソースが何だか汚らしい。


そこで結論。
元々File Treeの要素をDisplay:noneで隠しておいて、ボタン等で表示させる関数に上記スクリプトを組み込むわけです。
こうすれば全て解決＆エレガント。
ボタンをクリックするたびにディレクトリ内容が参照され、更新されるという素敵な副産物もあります！


何にしてもjQuery File Treeは優しい＆易しいプラグインです。
このブログがちょっとでも役に立てば幸いです。


むしろちっとばかし問題なのはjqUploader…。。。。次回。注意：悪かぁないよ