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. baffle.js

    JavaScript

    DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

    baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さ…

  2. jQuery-TimelineMe

    JavaScript

    シンプルなタイムラインを簡単につくれる「jQuery-TimelineMe」

    jQuery-TimelineMeは、タイムラインを簡単に構築すること…

  3. JavaScript

    シンプル・軽量・簡単なLightBox系モーダルウィンドウのjQueryプラグイン「portBox」…

    portBoxというjQueryプラグインを使えばシンプルで軽量なLi…

  4. CSS3 3D Text Plugin for jQuery
  5. Rollerblade.js

    JavaScript

    画像を360度回転させて見せることができるjQueryプラグイン「Rollerblade.js」

    Rollerblade.jsというjQueryプラグインを使えば、画像…

  6. JavaScript

    レンガ風に要素を綺麗に並べてグリッドレイアウトが作れる「The Wookmark jQuery pl…

    Pinterestのように高さの異なる要素をレンガ風に綺麗に並べて、簡…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP