&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フォルダをコピーするだけ。