Невозможно создать jsTree внутри вкладки jQueryUI - PullRequest
Новая
       5

Невозможно создать jsTree внутри вкладки jQueryUI

1 голос
/ 02 апреля 2010

Я не могу создать jsTree внутри вкладки пользовательского интерфейса jQuery. Если я создаю 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>

1 Ответ

2 голосов
/ 02 апреля 2010

Содержимое на этих вкладках не будет отображаться до тех пор, пока вы не нажмете вкладку, чтобы загрузить его, поэтому селектор 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" в этом загруженном контенте, и если да, то дерево еще не было построено, создает его.

...