Question

尝试使用jqtree实现jqtabs。在我们试图单击树的节点的情况下，将打开带有新内容的选项卡。

最后创建了一个新标签，其内容为，但不可编辑。不确定带有选项卡组合的树的行为。我的代码如下：

<aside class="right-sidebarmodi">

        <div id='jqxTree'> <ul>
                <li item-expanded='true'>Transaction Data
                    <ul>
                        <li id="oo">oo</li>
                        <li id="fc">fc</li>
                        <li id="pc">pc</li>
                    </ul>
                </li>           </ul>       </div>

                </aside>

        <div id='jqxWidget'>
           <div style='float: left;'>
                <div id='jqxTabs'>
                    <ul style='margin-left: 10px;'>


                    </ul>
                    <div id='oo1' >

                        <ui:include src="../../dsmod/transaction/1.xhtml" />
                    </div>
                    <div id='fc1' >Tab 2</div>
                    <div id='pc1' >Tab 3</div>
                </div>  
           </div>       
        </div>

我的脚本如下：

<script type="text/javascript">

        $(document).ready(function () {


            // Create jqxTree
             $("#jqxTabs").css('visibility', 'hidden');

            $('#jqxTree').jqxTree({ height: '800px', width: '245px' });
            $('#jqxTree').bind('select', function (event) {

                var htmlElement = event.args.element;
                var item = $('#jqxTree').jqxTree('getItem', htmlElement);
                var position;
                var tabsCount = $("#jqxTabs").jqxTabs('length');
               // alert(tabsCount);
                for (var i = 0; i &lt; tabsCount; i++) {
                    var tabTitle = $("#jqxTabs").jqxTabs('getTitleAt', i);
                    if (tabTitle == item.label) {
                        position = i;
                        break;
                    };
                };
                alert(item.label);
                $("#jqxTabs").css('visibility', 'visible');

                $('#jqxTabs').jqxTabs('removeAt', position);
                $('#jqxTabs').jqxTabs('addLast', item.label, $("#"+item.id+"1").html() );

                $('#jqxTabs').jqxTabs('ensureVisible', -1);

            });

        });
    </script>

        <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxTabs').jqxTabs({ height: 800, width: 1200  , showCloseButtons: true});
        });
    </script>

有人尝试过带有tabs的树吗？这是相同的行为还是为此的任何解决方法？

div中的内容通过使用jqwidgets，jqtabs变为不可编辑模式

0 个答案: