无法在jQueryUI选项卡内创建jsTree

我无法在jQuery UI选项卡内创建jsTree。如果我在选项卡之外创建jsTree，它可以正常工作。有谁知道jsTree是否与jQuery UI选项卡不兼容？无法在jQueryUI选项卡内创建jsTree

我的页面如下。如果我替换下面的行

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>

来源

2010-04-02 Raul Agrait

你能告诉我们一些代码吗？ – 2010-04-02 00:38:21

@Justin Ethier：用代码更新了问题。 – 2010-04-02 00:52:37

在这些选项卡中的内容，直到您单击该选项卡不存在加载它，所以选择器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事件，described here，当装载Ajax内容运行。上面的代码检查你的id="tabTree"是否在那个被加载的内容中，如果是，并且树还没有被构建，那么它将被构建。

来源

2010-04-02 01:06:05

无法在jQueryUI选项卡内创建jsTree

回答

相关问题