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. Simple Easy Slider

    JavaScript

    美しいフェードスライダーを実装できるjQueryプラグイン「Simple Easy Slider」

    Simple Easy Sliderは美しいフェードアニメーションによ…

  2. slider Menu

    JavaScript

    メニューリストをスライダーメニューにするjQueryプラグイン「slider Menu」

    slider Menuはメニューリストをスムーズにスライダーメニューに…

  3. no-image
  4. stacky

    JavaScript

    スライドダウン・スライドアップしてコンテンツを整理できるjQueryプラグイン「stacky」

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

  5. no-image

    JavaScript

    マテリアルデザインによるjQueryタイムピッカー実装「MDTimePicker」

    MDTimePickerはマテリアルデザインをコンセプトにしたタイムピ…

  6. mgGlitch

    JavaScript

    グリッチ効果を付けれるjQueryプラグイン「mgGlitch」

    mgGlitchは、CSS3の変換を利用して指定した要素にアニメーショ…

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP