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

関連記事

  1. A simple DIY responsive image slideshow
  2. Slideme

    JavaScript

    スライドでコンテンツを魅せることができるjQueryプラグイン「Slideme」

    SlidemeというjQueryプラグインを使えばコンテンツをスライド…

  3. TabTab.js

    JavaScript

    アニメーション付きで切り替わるjQueryのタブプラグイン「TabTab.js」

    TabTab.jsは素敵なアニメーション付きのタブコンテンツを実装する…

  4. Flipster

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイン「Flipster」

    レスポンシブにも対応しているシンプルなカルーセルを実装できるjQuer…

  5. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

  6. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

最近の記事

  1. F7U070bt
  2. 生きている玄米と玄米酵素ブレンド雑穀
  3. BOOST↑CHARGE Apple Watch用モバイルバッテリー

アーカイブ

PAGE TOP