jqTree

JavaScript

JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」

jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQueryプラグインです。ドラッグアンドドロップでの移動にも対応しているほか、キーボードもサポートしているとのこと。効率的にツリー構造を表示させたい人にはピッタリのjQueryプラグインですね。

jqTree

デモ

デモではnode1やnode2などと書かれたツリー構造が設置されています。node1の下にはchild1とchild2が、node2の下にはchild3が入っていて、横にある下矢印をクリックすると、下にある階層のものが非表示になります。再度クリックすると表示されます。

また、jqTreeはドラッグアンドドロップにも対応しているのが特徴です。各項目をドラッグして好きな位置に移動できます。例えば、child1とchild2の順番を入れ替えたり、child1の下の階層にchild2を入れたりなんてことも可能です。

オプションには、animationSpeed、autoEscape、autoOpen、buttonLeft、closedIcon、data、dataFilter、dataUrl、dragAndDrop、keyboardSupport、onCanMove、onCanMoveTo、onCanSelectNode……など、ほかにもたくさんのオプションが用意されています。

カスタマイズ性も高く、好みのツリー構造を作りたい人には嬉しい仕様ですね。

jqTree

Zoom SlideShowカルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」前のページ

アクセシブルなカルーセルシステムを実装できる「jQuery Accessible Carrousel using ARIA」次のページno-image

最近の記事

  1. ボヤージュブレンド
  2. 紫陽花とセミの抜けがら
  3. クラブハウスサンド 石窯カンパーニュ
PAGE TOP