jQuery UI Widgets Forums Navigation Tabs content in div becoming non editable mode by using jqwidgets , jqtabs

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  Martin 6 months, 4 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • bhanu.k
    Participant

    Trying to implement jqtabs with jqtree . scenario when we try to click on the node of the tree new tab will be opened with the content .

    New tab is created in the last with content but it is not editable . not sure about the behaviour of the tree with tabs combo . My Code goes as follows :

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

    And my script is as follows :

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

    Did any one tried with tree with tabs . is this the same behaviour or any work around for this .


    Martin
    Participant

    Hello bhanu.k,

    Yes, this is the functionality of jqxTabs.
    The content of the tabs can be updated using the setContentAt method.
    Here is an Example of it.

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.