【JQuery】エクスプローラーのようなフォルダーツリーを作ってみる(その1)

Javascript, 開発

おはようございます。

今日は実家に行って、庭に設置する柵を作る予定です。

最近私もDIY(たいしたものじゃないですが)にハマっているのですが、
とうとう、ホームセンターで木材まで購入して、本格的な感じでやるので楽しみです。

うまくできるだろうか。

さて本題。

約1ヶ月ぶりの JQuery ネタです。

今回は、JQuery(スタイルはBootstrap、Fontawesome を使いました)で、エクスプローラーのようなツリーを作成してみました。

なんだかんだみんな Windows 好きですよね。

スポンサーリンク

画面

基本的に、div要素をリスト(ul,li)に入れて表現しました。

css

style.css

html

sampleTree.html

スクリプト

javascript

sampleTree.js

サンプルイメージ

初期表示
初期表示

初期表示。矢印アイコンをシングルクリックか、アイコンやフォルダ名をダブルクリックで開閉します。

ツリーを展開
ツリーを展開

開閉したところ。

入れ子
入れ子

全部展開しました。基本的に入れ子にすれば階層はどんどん増やしていけます。

また、アイコンも Fontawesome ではなく自前の icon に変更することもできますね。

まとめ

便利なJQueryプラグインもありますが、プラグインを使えない場合や、最小限のものだけ欲しいといった場合には自分で実装しますよね。

何だか面白くなってきたので、もうちょっと機能を追加していきたいと思います。

何かのお役に立てれば。

ではでは。

 

スポンサーリンク


関連するコンテンツ