&tag(jsTree);
*目次 [#j0b0d646]
#contents

*関連ページ [#ge29ad0f]
-[[Rails]]

*参考情報 [#dec67ca3]
-[[jsTree » Home:http://www.jstree.com/]]
-[[Rails3]]


*概要 [#fe1fe991]
-高機能だけどめんどくさげな感じ

*基本的な使用方法 [#s35cca03]
-cssとjsを読み込む。
-cssとjsを読み込む。cssを読み込まないとフォルダ形式で表示されないので注意。
#pre{{
    <link rel="stylesheet" type="text/css" href="./style.css">
    <link rel="stylesheet" type="text/css" href="./jstree/themes/default/style.css">
    <script type="text/javascript" src="./js/jquery-1.11.1.min.js">
</script>
    <script type="text/javascript" src="./jstree/jstree.min.js">
}}
-ツリーの定義とjsTree化。
#pre{{
    <div id="html1">
        <ul>
	        <li>Root node 1
	        	<ul>
		        	<li class="jstree-clicked">Child node 1</li>
	        	</ul>
	        </li>	
	        <li>Root node 2</li>
        </ul>
    </div>
    <script type="text/javascript">
     $('#html1').jstree();
    </script>
}}

*Tips [#dd866f94]

**Rails4に組み込み [#y373806a]
-app/assets/javascripts以下にjstreeフォルダを作成。
-そこにjquery.jstree.js、jquery.jstree.min.js、themesフォルダをコピーする。
-application.jsでrequireする。
#pre{{
//= require jstree/jstree.min.js
}}
**Rails 3に組み込む [#g7430869]
-app/assets/javascriptsにjquery.jstree.jsとthemesフォルダをコピーするだけ。

トップ   編集 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS