jQuery UI Widgets Forums Navigation NavigationBar, ToolBar, NavBar Problem with expandMode: 'toggle' and 'expandAt' method

This topic contains 4 replies, has 2 voices, and was last updated by  Mysticol 9 years ago.

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

  • Mysticol
    Participant

    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&eacute;es </img></p>");
    		
    		\$("#jqxNavigationBar2").jqxNavigationBar({ width: 1040,  expandMode: 'toggle', theme: theme });
    		var navigationBarDivs2 = \$("#jqxNavigationBar2").children();
    
                \$(navigationBarDivs2[4]).before("<p> <img src=...> R&eacute;pertoires et syst&egrave;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&egrave;gles li&eacute;es &agrave; la r&eacute;plication  </img> </p>");
                \$(navigationBarDivs3[12]).before("<p> <img src=...> R&egrave;gles de sauvegarde </img> </p>");
    			\$(navigationBarDivs3[16]).before("<p> <img src=...> R&egrave;gles d&rsquo;administration </img> </p>");
    			\$(navigationBarDivs3[27]).before("<p> <img src=...> Mise en &oelig;uvre du noyau et de la base de donn&eacute;es </img> </p>");
    			
    		\$("#jqxNavigationBar4").jqxNavigationBar({ width: 1040,  expandMode: 'toggle', theme: theme });
    		var navigationBarDivs4 = \$("#jqxNavigationBar4").children();
    
                \$(navigationBarDivs4[16]).before("<p> <img src=...> R&egrave;gles sur les utilisateurs et groupes OS  </img> </p>");
                \$(navigationBarDivs4[24]).before("<p> <img src=...> Fichiers et r&eacute;pertoires PostgreSQL </img> </p>");
    			\$(navigationBarDivs4[48]).before("<p> <img src=...> Comptes utilisateurs de PostgreSQL </img> </p>");
    			\$(navigationBarDivs4[56]).before("<p> <img src=...> Autres r&egrave;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);
    		});
    
    • This topic was modified 9 years, 1 month ago by  Mysticol.

    Dimitar
    Participant

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

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


    Mysticol
    Participant

    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


    Dimitar
    Participant

    Hi Mysticol,

    Here is the example you requested: http://jsfiddle.net/Dimitar_jQWidgets/ym6j2ncq/2/.

    Best Regards,
    Dimitar

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


    Mysticol
    Participant

    Thank You

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

You must be logged in to reply to this topic.