メモ的な日記

プログラミングについての個人的メモ日記。PHPとかjQueryとかがメイン。

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

フォルダツリーの表示

フォルダツリーの表示をやってみた。

使用するファイルは3つです。
・interface.js
・treeview.js
・style.css

使い方

最初にjQueryとファイルの組込み

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="interface.js" type="text/javascript"></script>
<script src="treeview.js" type="text/javascript"></script>

あとはul/liを使ってリストを作るだけです。

<ul class="myTree">
  <li class="treeItem"><img src="img/folder.png" class="folderImage" />
    <span class="textHolder">フォルダ1</span>
    <ul>
      <li class="treeItem"><img src="img/folder.png" class="folderImage" /><span class="textHolder">サブフォルダ1-1</span></li>
      <li class="treeItem"><img src="img/folder.png" class="folderImage" /><span class="textHolder">サブフォルダ1-2</span>
      <ul style="display: none;">
        <li class="treeItem"><img src="img/folder.png" class="folderImage" /><span class="textHolder">サブフォルダ1-2-1</span></li>
        <li class="treeItem"><img src="img/folder.png" class="folderImage" /><span class="textHolder">サブフォルダ1-2-2</span></li>
        <li class="treeItem"><img src="img/folder.png" class="folderImage" /><span class="textHolder">サブフォルダ1-2-3</span></li>
      </ul>
    </li>
  </ul>
</li>
  <li class="treeItem"><img src="img/folder.png" class="folderImage" /> <span class="textHolder">フォルダ2</span>
    <ul>
      <li class="treeItem"><img src="img/folder.png" class="folderImage" /> <span class="textHolder">サブフォルダ2-1</span></li>
      <li class="treeItem"><img src="img/folder.png" class="folderImage" /> <span class="textHolder">サブフォルダ2-2</span></li>
    </ul>
  </li>
</ul>

サンプルはこちら
ツリーの開閉も可能です。
組み込んでリスト構造を作るだけなので簡単。

おわり。