WordPressで使いたいJAVAスクリプト「jQuery plugin:Treeview」

treeview
JavaScriptライブラリに触れる機会があり、触っていたら、とても動きがスムーズで気持ちよく、それを触っているだけにとどまらず、新しく出るもの出るものを片っ端から試しては、自分に合ったものを選別する毎日が続きました。
いろいろ試してみた結果、ちょっとしたアクセサリー的な使い方はもちろんのこと、メニューなどでの使い勝手の向上にも一役買うことの出来るJavaScriptライブラリを今流行のWordPressでも使うことが出来ないのかという素朴な疑問から、ブログに記録していこうと思います。

jQuery plugin: Treeview.ver1.4

このスクリプトは、アップロード方法やJavaScriptライブラリを設置の仕方をお伝える上で、非常に視覚的に見やすくするスクリプトではないかと思っています。
実際に使ったことは無かったのですが、当ブログを開設する上で欠かせないスクリプトと決めていました。

私は、JAVAスクリプトを管理する際、必ず同じスタイルに統一しています。
今回ご紹介するスクリプトの解凍時の状態は以下となっています(ver1.4)。

フォルダ構成の修正

解凍時

  • jquery-treeview
    • jquery-treeview
      • demo
        • async.html
        • bg.gif
        • demo.js
        • images.html
        • index.html
        • large.html
        • prerendered.html
        • screen.css
        • simple.html
        • source.php
        • source.phps
      • images
        • file.gif
        • folder.gif
        • folder-closed.gif
        • minus.gif
        • plus.gif
        • treeview-black.gif
        • treeview-black-line.gif
        • treeview-default.gif
        • treeview-default-line.gif
        • treeview-famfamfam.gif
        • treeview-famfamfam-line.gif
        • treeview-gray.gif
        • treeview-gray-line.gif
        • treeview-red.gif
        • treeview-red-line.gif
      • lib
        • jquery.cookie.js
        • jquery.js
      • changelog.txt
      • jquery.treeview.async.js
      • jquery.treeview.css
      • jquery.treeview.js
      • jquery.treeview.min.js
      • jquery.treeview.pack.js
      • todo

それを下記の構成に変更し、他のスクリプトと重複しないように保管するようにしています。

修正後

  • jquery.treeview
    • css
      • jquery.treeview.css
    • images
      • treeview※1
        • file.gif
        • folder.gif
        • folder-closed.gif
        • minus.gif
        • plus.gif
    • js
      • jquery.js
      • jquery.treeview.min.js
    • treeview.html※2

今回は、エクスプローラ(実際に利用している)のように見える「firetree」のみを設定して、後は省いています。
大変、多くのファイルがありますが、構成を統一して考えれば慣れてくるはずです。

フォルダ構成として、スクリプトの名前「jquery.treeview」とし、その中に「css」「images」「js」という一般的なスタイルに統一しています。
こうすることで、複数のスクリプトを利用する際、「上書き防止」と「削除」を同時に可能とすることが出来ます。
ポイントとして、ファイルが上書きされないように以下の点を考慮すると、スクリプトを重複して置いても上書きされません。
※1 : イメージ画像はimagesフォルダの中に「treeview」を作り入れている
※2 : index.html → treeview.htmlに変更している

ファイルの修正

設置場所の変更に伴い、いくつかのファイルを修正します。

jquery.treeview.css
1
url(images/XXXXX.gif);
1
url(../images/treeview/XXXXX.gif);

jquery.treeview.cssでは、全ての「XXXXX.gif」イメージの場所に併せて指定する。

treeview.html

今回、「treeview.html」は必要ないですが、スクリプトを読み込ませる部分をWordPressに認識させなければなりませんので、「head」?「/head」の中にソースを記述する必要があります。
直接テンプレートに入力してもいいのでしが、出来ることなら、テンプレートを汚さずに記述する方法が幾つかありましたので、そのひとつをご紹介します。
詳しくは、以前のブログ「WordPressプラグインではないJAVAスクリプトの設置場所メモ」をご覧ください。

記述方法

ここまでで、ファイルの設置は完了しましたが、このスクリプトはこれだけでは動きません。
記述は、以下のような感じで構いませんが、最後に押したときの動作を指定してやる必要があります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul id="tree1※1" class="filetree">
  <li><span class="folder">WindowsXP(C:)</span>
    <ul>
        <li><span class="folder">Documents and Settings</span></li>
        <li><span class="folder">Intel</span></li>
        <li><span class="folder">Program Files</span></li>
        <li><span class="folder">Windows</span></li>
    </ul>
   </li>
</ul>
 
<script type="text/javascript">// < ![CDATA[
$(document).ready(function() {
$("#tree1※1").treeview( {collapsed : true} );
});
// ]]&gt;</script>
</script>

※1 : tree1 何を入れても良い

上記サンプル

  • WindowsXP(C:)
    • Documents and Settings
    • Intel
    • Program Files
    • Windows

どうでしょうか。動きましたでしょうか?また、利用イメージがつかめたでしょうか?
触ってるだけで癒されますし、見た目も分りやすくなる、このJAVAスクリプトは、いろいろな使い道があると思います。

Error: Suspended

関連記事:

Tags: , , ,

コメントする