私は自分のページにjsTreeを追加しました.jQuery 1.6.4などです:
<div id="categoriesMenu" class="categoriesMenu"><!-- --></div>
<script type="text/javascript">
function convertCategoriesForMenu(categories) {
var scrubbedData = [];
$.each(categories, function(idx,category) {
var scrubbedCat = {
"data" : category.name,
"metadata" : { id : category.id },
"children" : convertCategoriesForMenu(category.childCategories),
"attr" : { "href" : "${categories_base_url}"+category.id }
};
scrubbedData.push(scrubbedCat)
});
return scrubbedData;
}
$(function () {
$("#categoriesMenu").jstree({
"json_data" : {
"ajax" : {
"url" : "${categories_base_url}",
"success" : function (data) {
return convertCategoriesForMenu(data);
}
}
},
"themes" : {
"theme" : "classic",
"dots" : false,
"icons" : false
},
"plugins" : [ "themes", "json_data" ]
});
});
</script>
ただし、各行を拡張イメージとして表示し、新しい行 (および灰色の背景) にタイトルを表示します。
理由が分からないようです。サーバーから返された JSON データの先頭にキャリッジ リターンやライン フィードがないように見えます。JS にブレークを入れて、ブラウザが JSON を解析するときに、キャリッジ リターンもないように見えることを確認しました。または改行。
テーマを交換してみましたが、効果がないようです。
Edit 1 CSS Inheritance は間違いなく問題です。#menu の Roo の standard.css スタイルから display:block をプルしているように見えます。問題は、メニューが左側に配置されるようにスタイルが必要であることです。これは、私が jsTree を使用しているためです。
ツリーの構造は次のとおりです。
<ul> <!-- root of menu, display:block -->
<li> <!-- Node element, display:block -->
<ins /> <!-- image, display:inline -->
<a>Node Name</a> <!-- text for node, display:inline -->
</li>
</ul>
そして、ツリーをタグの外に置くと、期待どおりに機能します。しかし、 の中に入れると、すべての要素が display:block に設定されます。
問題は、タグとタグにインラインで CSS スタイルを適用するにはどうすればよいかということです。