jQuery UI Widgets Forums Navigation Tabs List existing tabs

Tagged: 

This topic contains 5 replies, has 4 voices, and was last updated by  Yavor Dashev 3 years, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • List existing tabs #115180

    edilson88
    Participant

    Is there a function to list all tabs under a jqxTab control so we can interact with them ?

    List existing tabs #115182

    admin
    Keymaster

    Hi edilson88,

    We do not have such API, but you can update a tab at specific index by using setContentAt and setTitleAt methods for updating tab content and title respectively.

    Best regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

    List existing tabs #120206

    BKSC97
    Participant

    hi,

    How do I display jqxtabs on selecting a item in jqxmenu.

    Thanks

    List existing tabs #120208

    admin
    Keymaster

    Hi BKSC97,

    Do you want to display a Tabs component or to set the Selection to a Tab in jqxTabs?
    Do you use jQWidgets with Javascript or it is an Angular, React, Vue project?

    Best regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

    List existing tabs #120210

    BKSC97
    Participant

    Hi,

    I want to display the tab component on click of sub-item in a menu, that tab component will have other controls later.
    I use jQWidgets with Javascript.

    Thanks

    List existing tabs #120222

    Yavor Dashev
    Participant

    Hi BKSC97,

    I have created a quick code example of how achieve similar functionality, but without a bit more context this is the only situation I can showcase you how to do.It uses button to show the jqxTabs but you can easily implement it with sub-item in a menu.
    Code snippet:

        $("#jqxButton").on('click', function ()
                {
                    $('#jqxTabs').jqxTabs({
    
                        theme: 'bootstrap',
    
                        width: 460,
    
                        height: 310,
    
                        scrollPosition: 'right',
    
                        keyboardNavigation: false
    
                    });
                        // show the popup window.
                        $("#popupWindow").jqxWindow('open');
                });
    
                // initialize the popup window and buttons.
                $("#popupWindow").jqxWindow({
                    width: 500, resizable: false,  isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01           
                });
    
             
                $("#Cancel").jqxButton({ theme: theme });
            
                $("#jqxButton").jqxButton({ theme: theme });
                // update the edited row when the user clicks the 'Save' button.
             
    
            });
        </script>
    
    </head>
    <body class='default'>
    
        <div>
            <input type="button" value="Button" id='jqxButton' />
        </div>
        <div id='jqxWidget'>
            <div id="grid"></div>
            <div style="margin-top: 30px;">
                <div id="cellbegineditevent"></div>
                <div style="margin-top: 10px;" id="cellendeditevent"></div>
           </div>
                <div id="popupWindow">
                    <div id='jqxTabs'>
                        <ul style='margin-left: 30px;'>
                            <li>Node.js</li>
                            <li>JavaServer Pages</li>
                            <li>Active Server Pages</li>
                        </ul>
                        <div>
                            <input id="Cancel" type="button" value="Close window" /></td>
                            <br> 
                            Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
    
                        </div>
                        <div>
                            JavaServer Pages (JSP) is a Java technology that helps software developers serve
                        
                        </div>
                        <div>
                            ASP.NET is a web application framework developed and marketed by Microsoft to allow
                        </div>  
                                   
                    </div>
                    
                   
                </div>
           </div>
        </div>

    If that code snippet doesn’t give you idea how to achieve the functionality you want you can share a bit more context and a code example of your case so that we can give you a better solution for you!

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.