開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。
ダウンロードはこちら

2014.5.28 バージョン3.0.0用に書き換え

インプットデータはXMLやJSONに対応、HTMLを直書きしても開閉などをしてくれるようです。今回は、JSONでやってみました。JSONデータとデモ

スクリプト

<link href="dist/themes/default/style.min.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="dist/jstree.min.js" type="text/javascript"></script>

JSONデータの表示

<div id="div795"></div>

<script type="text/javascript">
$(function () {
    $("#div795").jstree({ 'core' : {
        "data": jsonData795
    }});
});
</script>

オプションはかなり豊富です。

サイトより
Currently supported browsers are:
Internet Explorer 6+ *
Mozilla Firefox 2+
Safari 3+
Opera 9+
Google Chrome

その他
Fancytree (Dynatree)
JqTree
a11yTree

: グラフ作成プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

: クリックするとテキストボックスにかわるラベルを実装

Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです

: ページの画像を非同期で読み込んでくれる「Lazy Load」

「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。ダウンロード |

: シンプルな画像スライダー/ギャラリー用プラグイン

スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。シン

: テキストエリアを自動的にリサイズしてくれる「Autosize」

「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し

: クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を