CODEWITHSUNDEEP
jqueryjquery-mobile
Astronaut
Astronaut

Reputation: 7031

How do I programmatic toggle navbar tabs in jQuery Mobile?

How do I toggle the navbar's interface in jQuery Mobile so i can press a button in a div and display a different navbar?

Upvotes: 3

Views: 3284

Answers (4)

arttronics
arttronics

Reputation: 9955

jsFiddle Demo of jQuery Mobile NAV Toggle

I have created a jsFiddle Demo via the link above that should address your question.

In particular, you can set the NAV Bar easily as well as toggle it to and from different bars.

I say different bars because the fiddle allows for as many more NAV bars as you require, and is very easy to adapt. To be sure, any NAV bar maxs-out at 5 buttons.

EDIT: Per your message comments, it's easy to navigate between pages once more than 1 page is created. This different jsFiddle shows how to label the anchor tags to switch pages on-the-fly. This can be used with the original jsFiddle Answer to provide a complete solution.


RE-EDIT: Per your most recent comments, this new jsFiddle allows toggling of the buttons contents while on the same page.

Provided are simple fiddle comments to understand what's going on, but ask about anything unclear.

Upvotes: 7

frequent
frequent

Reputation: 28493

Do your tabs have to be intergated in the JQM urlHistory or browser history?

If not, I changed a collapsible-set into a tabviewer, so instead of having collapsibles top-down, I changed the widget to support data-type="horizontal" and then displayed the collapsibles left to right with the content section showing as a tab. I also added next-previous buttons, so you can go back and forth by either clicking on the tab buttons or on the prev-next buttons.

However, it all happens inside the page, so no browser back-button support.

If this goes in the right direction, I can put up a sample page and explanation.

Upvotes: 0

user1263800
user1263800

Reputation:

Is this what you are trying to achieve? http://jsfiddle.net/cHrSN/18/

Upvotes: 0

Mali
Mali

Reputation: 131

Checkout the updatelayout event. This event is triggered by components within the framework that dynamically show/hide content, and is meant as a generic mechanism to notify other components that they may need to update their size or position. example from jQuery site:

$( '#foo' ).hide().trigger( 'updatelayout' );

Upvotes: 0

Related Questions