jQuery UI Widgets › Forums › Navigation › Tabs › List existing tabs
Tagged: Tabs
This topic contains 5 replies, has 4 voices, and was last updated by Yavor Dashev 3 years, 5 months ago.
-
AuthorList existing tabs Posts
-
Is there a function to list all tabs under a jqxTab control so we can interact with them ?
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 StoevSmart UI Team
https://www.htmlelements.com/hi,
How do I display jqxtabs on selecting a item in jqxmenu.
Thanks
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 StoevSmart UI Team
https://www.htmlelements.com/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
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 -
AuthorPosts
You must be logged in to reply to this topic.