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

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

インプットデータは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>

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

Related

Twenty Twelve 投稿日・投稿者を非表示に Tumblrの投稿をウィジェットに表示できる「Tumblr Widget」 チュートリアルとしてブログアプリ(1) 投稿タイトル(entry-title)を非表示にする Twenty Twelve 投稿者情報を表示/非表示に 「最近の投稿」ウィジェット カスタマイズ Twenty Fourteen 「投稿者」を非表示 投稿タイトルのtitle属性を削除など Twenty Twelve 1.2での変更点