Question

我无法在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>

Answer 1

在您单击选项卡以加载它之前，这些选项卡中的内容不存在，因此选择器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;
  }
});

加载ajax内容时会运行tabsload事件described here。上面的代码检查您的id="tabTree"是否在加载的内容中，如果是，并且尚未构建树，则构建它。

无法在jQueryUI选项卡中创建jsTree

1 个答案: