1

jQuery UI タブ内に jsTree を作成できません。タブの外に jsTree を作成すると、正常に動作します。jsTree が jQuery UI タブと互換性がないかどうかは誰にもわかりませんか?

私のページは以下です。次の行を置き換えると

var treeContainer = jQuery("#tabTree");

と：

var treeContainer = jQuery("#pageTree");

次に、タブ コントロールの下のページにツリーが正常に読み込まれます。


<body>
    <div id="myTabs">
        <ul>
            <li><a href="tab1.html">Tab 1</a></li>
            <li><a href="tab2.html">Tab 2</a></li>
            <li><a href="tab3.html">Tab 3</a></li>
        </ul>
    </div>

    <div id="pageTree"></div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js" type="text/javascript"></script>         
    <script type="text/javascript" src="jsTree/jquery.tree.js"></script>
    <script type="text/javascript">     
        $(function(){

            $("#myTabs").tabs();

            var treeContainer = jQuery("#tabTree");
            var treeData = {
                data: {
                    type : "json",
                    opts : {
                        static : [
                            {
                                data: "A node",
                                children: [
                                    { data : "Child node 1" },
                                    { data : "Child node 2" },
                                    { data : "Child node 3" }
                                ]
                            }
                        ]

                    }
                }
            };
            treeContainer.tree(treeData);
        });     
    </script>
</body>

tab3.html の内容は次のとおりです。

<div id="tab3Container">        
    <div id="tabTree"></div>
</div>
4

1 に答える 1

2

これらのタブのコンテンツは、タブをクリックしてロードするまで表示されないため、セレクターにjQuery("#tabTree")は一致するものがなく、そのセレクターに一致する要素はまだ存在しません。次のように、その ajax ページがロードされたときにこのコードを実行する必要があります。

var treeLoaded = false;
$("#myTabs").bind( "tabsload", function(event, ui) {
  if(!treeLoaded && jQuery("#tabTree", ui.panel).length) {
    var treeContainer = jQuery("#tabTree");
    var treeData = {
        data: {
            type : "json",
            opts : {
                static : [
                    {
                        data: "A node",
                        children: [
                            { data : "Child node 1" },
                            { data : "Child node 2" },
                            { data : "Child node 3" }
                        ]
                    }
                ]

            }
        }
    };
    treeContainer.tree(treeData);
    treeLoaded = true;
  }
});

ここで説明されているtabsloadイベントは、ajax コンテンツが読み込まれるときに実行されます。上記のコードは、ロードされたコンテンツに含まれているかどうかを確認し、含まれていてツリーがまだ構築されていない場合は、それを構築します。id="tabTree"

于 2010-04-02T01:06:05.430 に答える