代码之家 › 专栏 › 技术社区 › Raul Agrait

无法在jqueryui选项卡内创建jstree

jstree jquery-ui-tabs jquery-ui jquery

Raul Agrait · 技术社区 · 14 年前

我无法在jquery ui选项卡内创建jstree。如果我在选项卡之外创建jstree,它可以正常工作。有人知道jstree是否与jquery ui选项卡不兼容吗?

我的网页在下面。如果我换下下面的一行

var treeContainer = jQuery("#tabTree");

用:

var treeContainer = jQuery("#pageTree");

然后,该树在页中的tab控件下面加载fine。

<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>

1 回复 | 直到 14 年前

Nick Craver 14 年前

这些选项卡中的内容在单击该选项卡以加载它之前不存在,因此选择器 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" 在加载的内容中,如果是,而且树还没有构建,则构建它。

推荐文章

chris loughnane · 使用jQuery UI滑块移动和缩放svg元素时遇到问题?

6 年前

Tirkesh Turkesh · 如何在可拖放div中释放项目的精确位置元素上拖放

6 年前

ferralucho · Hightlight jquery datepicker标头选定的星期几

6 年前

Paili · 如何在jQuery自动完成中添加其他内容?

6 年前

monu · 动态嵌套选项卡创建

6 年前

Tirkesh Turkesh · 可拖动行在jquery中不工作?

6 年前

Joe · WordPress-如何按字母顺序排列jQuery自动完成搜索建议结果,优先排序第一个字符,然后再排序第二个字符等。?

6 年前

Triwahyu Pamungkas Pribadi · 如何在可拖动停止时获取目标/类名

6 年前

pcCC28 · 如何基于jwt令牌身份验证保持用户登录。

6 年前

buggy1985 · 具有多个元素的jQuery UI Sortable抛出“TypeError:无法读取null的属性‘insertBefore’”

6 年前