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. preload

    JavaScript

    プリロードやローディング画面を実装できるjQueryプラグイン「preload」

    preloadは、その名のとおり「プリロード」やローディング中の画面を…

  2. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

  3. Building a Vertical Timeline With CSS and a Touch of JavaScript
  4. jQuery LED

    JavaScript

    LEDディスプレイのようなカウントダウン・タイマー・時計を実装できる「jQuery LED」

    jQuery LEDは、LEDディスプレイで表示されるようなカウントダ…

  5. jsPanel

    JavaScript

    高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」

    jsPanelは高度なセッティングができるフローティングパネル、モーダ…

  6. stroll.js

    JavaScript

    CSS3を使った豊富なスクロールエフェクト「stroll.js」

    stroll.jsはCSS3を使った豊富なCSSリストスクロールエフェ…

最近の記事

  1. パーソナルパーティション
  2. 200-DGBG020
  3. Anker PowerPort 5-in-1 37.5W Hub

アーカイブ

PAGE TOP