0

私は自分のページに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 スタイルを適用するにはどうすればよいかということです。

4

0 に答える 0