Geek Answers Handbook

JQuery Mobile Bottom Navigation Bar

Is there a jQuery Mobile sample working code for the bottom navigation bar of iPhone / Mobile Safari?

I tried to use Google and the code itself, but I never worked on iPhone / Mobile Safari. Other browsers seem fine, for example. Desktop Safari, Desktop Chrome, Android Browser.

The code I tried (and it does not work for Mobile Safari .. doh)

<div data-role="footer" data-position="fixed" data-tap-toggle="false"> <div data-role="navbar"> <ul> <li><a href="#one" data-icon="custom">Entry</a></li> <li><a href="#two" data-icon="custom">Winner</a></li> <li><a href="#three" data-icon="custom">Gallery</a></li> </ul> </div><!-- /navbar --> </div>

Any help is appreciated :)

Thanks.

+2
jquery-mobile
source share
2 answers

Try the following working example using custom icons (using jQuery Mobile 1.2.0):

Create the css file mycss.css and include the following in it:

 .ui-icon-custom { background: url("../img/run.png") no-repeat rgba(0, 0, 0, 0.4) !important; }

where run.png is the name of your custom icon.

Then in your html file include the following:

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <!-- LOAD YOUR CSS FILE WHILE PAYING ATTENTION TO ITS PATH! --> <link rel="stylesheet" type="text/css" href="./css/mycss.css"/> </head> <body> <div data-role="page"> <div data-role="content"> <h1>This is my content</h1> </div> <div data-role="footer" data-position="fixed" data-tap-toggle="false"> <div data-role="navbar"> <ul> <li><a href="#one" data-icon="custom">Entry</a></li> <li><a href="#two" data-icon="custom">Winner</a></li> <li><a href="#three" data-icon="custom">Gallery</a></li> </ul> </div><!-- /navbar --> </div> </div> </body> </html>

Screenshot (iPhone 5):

screenshot

PS: Pay attention to the path of your css / png files!

Let me know if this works for you.

+5
source share

I think something like this is what you are looking for:

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

Straight from jQuery Mobile Docs

If it doesn't work for you, I would look at the markup for the rest of your page, as something is probably incorrectly encoded. Also, make sure you are using the latest stable build of jQuery Mobile (1.2.0) and jQuery (1.8.2)

Here's a basic jsFiddle example .

0
source share

More articles:


All Articles