#

Navigation Search

- Accordion
- AJAX Navigation
- Autocomplete
- Buttons
- Checkboxes
- Collapsibles
- Controlgroup
- Dialogs
- Fixed toolbars
- Flip switch toggle
- Footer toolbar
- Form elements
- Grids
- Header toolbar
- Icon
- Links
- Listviews
- Loader overlay
- Navbar
- Navbar, persistent
- Pages
- Panels New
- Popup
- Radio buttons
- Select
- Slider, single
- Slider, dual range New
- Table, column toggle New
- Table, reflow New
- Text inputs & textarea
- Transitions
- Collapsibles
- Dynamic collapsible
- Controlgroups
- Dynamic controlgroup
- Listviews
- Grid Listview
- Autodividers Linkbar
- Autodividers Selector
- Navigation
- Backbone and Require.js example
- Redirection with server-side support
- Panels
- Panel styling
- Open panel on swipe
- Popups
- Dynamic popup
- Popup with arrow
- Responsive Tables
- Reflow: Custom styles
- Reflow: Heading groups
- Column toggle: Customization options
- Column toggle: Heading groups
- Column toggle demo: Phone comparison
- Sliders
- Tooltip extension
- Swipe
- Swipe to navigate
- Swipe to delete list item
- Forms
- Why won't my CSS styles apply correctly to a widget?
- Updating the value of enhanced form elements does not work.
- My HTML 5 inputs look different across devices and browsers.
- My range or search inputs are being change to number/text.
- Sometimes my custom select shows as a popup other times its a dialog.
- Disabling a button does not work.
- Controls in my fixed header or footer are not responding or behave erratically.
- Pages
- Why aren't my scripts and styles loading?
- Why isn't DOM ready working for my scripts?
- How do I load a page?
- Why is only the first page of my multi page document loaded?
- I'm trying to pass query params to a page but it's not working?
- I'm trying to pass information via the hash but it's not working?
- I'm trying to use the application cache but it's not working?
- Content injected into a page is not enhanced.
- Triggering create on injected HTML does not work.
- How can I stop JQM from auto-enhancing an element?
- How can I stop JQM from enhancing a block of elements?
- How do I control page titles?
- How do I load a page?
- Events
- How do I use touch and mouse events?
- Apps
- How do I need to configure PhoneGap/Cordova?

# Persistent navbars API

These pages are a demo of a persistent navbar in a fixed footer toolbars. Click on any of the links in the footer, and you'll see the page content transition. Both the persistent header and footer on these pages remain in place during the animation to a new HTML page.

To tell the framework to apply the persistent behavior, add the same `data-id` attribute to the header and/or footer of all HTML pages in the navigation. It's that simple: If the page you're navigating to has a header or footer with the same `data-id` as the page you're navigating from, the toolbars will appear fixed outside of the transition. Each of the pages in this demo has a different transition to test out how this works.

Typically, the persistent toolbar technique will be combined with fixed positioning. In this example, the footer also has a navbar, like this:

    <div data-role="footer" data-id="foo1" data-position="fixed">
    	<div data-role="navbar">
    		<ul>
    			<li><a href="a.html">Info</a></li>
    			<li><a href="b.html">Friends</a></li>
    			<li><a href="c.html">Albums</a></li>
    			<li><a href="d.html">Emails</a></li>
    		</ul>
    	</div><!-- /navbar -->
    </div><!-- /footer -->

To set the active state of an item in a persistent toolbar, add `class="ui-btn-active ui-state-persist"` to the corresponding anchor.

    <li><a href="a.html" class="ui-btn-active ui-state-persist">Info</a></li>

### A note about transitions

The slide, slideup, slidedown, fade or none page transitions all work great with persistent fixed toolbars. However, intensive 3D transitions like flip, turn, and flow can cause positioning and animation performance issues with this technique so we don't recommend using them.

- Info
- Friends
- Albums
- Emails