jQuery UI Widgets › Forums › Navigation › NavigationBar, ToolBar, NavBar › Problem with expandMode: 'toggle' and 'expandAt' method
Tagged: expand, expandAt, expandMode, jqxnavigationbar, Navigation Bar, toggle
This topic contains 4 replies, has 2 voices, and was last updated by Mysticol 9 years, 10 months ago.
-
Author
-
Hello,
Im using multiple navigation bars with expand=toggle :
\$(document).ready(function () { var theme = getDemoTheme(); // Create jqxNavigationBar \$("#jqxNavigationBar1").jqxNavigationBar({ width: 1040, expandMode: 'toggle', theme: theme }); var navigationBarDivs1 = \$("#jqxNavigationBar1").children(); \$(navigationBarDivs1[3]).before("<p> <img src=....> Base de données </img></p>"); \$("#jqxNavigationBar2").jqxNavigationBar({ width: 1040, expandMode: 'toggle', theme: theme }); var navigationBarDivs2 = \$("#jqxNavigationBar2").children(); \$(navigationBarDivs2[4]).before("<p> <img src=...> Répertoires et systèmes de fichiers </img> </p>"); \$(navigationBarDivs2[19]).before("<p> <img src=...> Fichiers PostgreSQL </img> </p>"); \$(navigationBarDivs2[25]).before("<p> <img src=...> Composants PostgreSQL </img> </p>"); \$("#jqxNavigationBar3").jqxNavigationBar({ width: 1040, expandMode: 'toggle', theme: theme }); var navigationBarDivs3 = \$("#jqxNavigationBar3").children(); \$(navigationBarDivs3[4]).before("<p> <img src=...> Règles liées à la réplication </img> </p>"); \$(navigationBarDivs3[12]).before("<p> <img src=...> Règles de sauvegarde </img> </p>"); \$(navigationBarDivs3[16]).before("<p> <img src=...> Règles d’administration </img> </p>"); \$(navigationBarDivs3[27]).before("<p> <img src=...> Mise en œuvre du noyau et de la base de données </img> </p>"); \$("#jqxNavigationBar4").jqxNavigationBar({ width: 1040, expandMode: 'toggle', theme: theme }); var navigationBarDivs4 = \$("#jqxNavigationBar4").children(); \$(navigationBarDivs4[16]).before("<p> <img src=...> Règles sur les utilisateurs et groupes OS </img> </p>"); \$(navigationBarDivs4[24]).before("<p> <img src=...> Fichiers et répertoires PostgreSQL </img> </p>"); \$(navigationBarDivs4[48]).before("<p> <img src=...> Comptes utilisateurs de PostgreSQL </img> </p>"); \$(navigationBarDivs4[56]).before("<p> <img src=...> Autres règles </img> </p>"); \$("#jqxNavigationBar5").jqxNavigationBar({ width: 1040, expandMode: 'toggle', theme: theme });
And i have a jqxtab with items using the expandAt method. It is supposed to link and open the correct navigationBar element when i click on those items. This works but the problem is that the others navigationBar items stay open. So the result is that i can have multiple elements open while im in ‘toggle’ mode. Is this normal and how can i fix it ? Thank You
\$('.btn-nomm1').click(function () { \$('#jqxTabs').jqxTabs('select', 1); \$('#jqxNavigationBar2').jqxNavigationBar('expandAt',0); }); \$('.btn-nomm2').click(function () { \$('#jqxTabs').jqxTabs('select', 1); \$('#jqxNavigationBar2').jqxNavigationBar('expandAt',1); });
Hello Mysticol,
Please have a look at the following example that shows that expandAt works correctly with
expandMode: 'toggle'
: http://jsfiddle.net/Dimitar_jQWidgets/ym6j2ncq/. Make sure you are using the latest version of jQWidgets (3.6.0) in your solution.Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you for your answer but i would have wanted to see the same example with a second button “expand the second item” to see if it correctly collapses the first one when cliked
Hi Mysticol,
Here is the example you requested: http://jsfiddle.net/Dimitar_jQWidgets/ym6j2ncq/2/.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank You
-
AuthorPosts
You must be logged in to reply to this topic.