jQuery Mobile navigation bar
May 21, 2021 jQuery Mobile
Table of contents
jQuery Mobile navigation bar
With the navigation bar you can quickly reach the specified location, and jQuery Mobile places the code for the navigation bar section in the div of the data-role header.
jQuery Mobile navigation bar
The navigation bar consists of a horizontal set of links, usually contained in the head or tail.
By default, the link in the navigation bar automatically becomes a button (no data-role"button" is required).
Define the navigation bar using the data-role"navbar" property:
<div data-role="navbar" >
<ul>
<li><a href="#anylink">首页</a></li>
<li><a href="#anylink">页面二</a></li>
<li><a href="#anylink">搜索</a></li>
</ul>
</div>
</div>
Try it out . . .
|
By default, a button is the same width as its contents. U
se a sequenceless table to evenly divide the width of the buttons: 1 button is 100% wide, 2 buttons are 50% wide each, 3 buttons are 33,3% wide, and so on.
However, if you specify more than 5 buttons in the navigation bar, they will be split into multiple lines (see More Instances).
|
|---|
Activate the button
When a link in the navigation bar is clicked, it gets the appearance of being selected (pressed).
If you want to get this look when you don't click on a link, use class "ui-btn-active":
For multiple pages, you may want each button to appear on the page where the current user is located. To do this, add "ui-state-persist" and "ui-btn-active" to the linked class:
More instances
The navigation bar in the content
How to add a navigation bar within the data-role"content".
The navigation bar in the tail
How to add a navigation bar within the tail.
The positioning icon in the navigation bar
How to position the icon in the navigation bar inside the tail.
More than 5 buttons
A demonstration of the 10 buttons in the navigation bar.
About jQuery Mobile to implement the navigation bar related knowledge is introduced here, I hope to help you!