Change custom navigator icon to jquerymobile

Question

Could not find a solution to change the custom navigator icon on a page with multiple footers.

Here is what I am using now:

$(".live_menu .ui-icon").css("background","url(/btn_on.gif) !important"); $(".live_menu .ui-icon").css("background-repeat","no-repeat !important"); 

Any ideas?

Answer 1

on this topic:

• Specifying styles for the selected tab in the navigation bar
• Bottom navigation bar in jQuery mobile device similar to iPhone navbar, maybe?
• http://jquerymobile.com/test/docs/buttons/buttons-icons.html

Live example:

• http://jsfiddle.net/phillpafford/8pwFK/29/

Custom badges

To use custom icons, specify the value of the data icon, which has a unique name, for example myapp-email and the button plugin, generates a class, the prefix ui-icon- to the icon icon value and apply it to the button. You can then write a CSS rule that is intended for ui-icon-myapp-email to indicate the background source of the icon. To maintain visual consistency, create a white 18x18 pixel icon saved as PNG-8 with alpha transparency.

JS:

 $('#custom-li-1').click(function() { $(this).attr('data-icon','star'); $(this).children().children().next().removeClass('ui-icon-custom').addClass('ui-icon-star'); }).page(); $('#custom-li-2').click(function() { $(this).attr('data-icon','home'); $(this).children().children().next().removeClass('ui-icon-grid').addClass('ui-icon-home'); }).page(); $('#custom-li-3').click(function() { $(this).attr('data-icon','grid'); $(this).children().children().next().removeClass('ui-icon-star').addClass('ui-icon-grid'); }).page(); 

HTML:

 <div data-role="page" id="home"> <div data-role="header" data-theme="b"> <h1>Test</h1> </div> <div data-role="content" data-theme="d"> <div data-role="navbar" data-theme="d"> <ul id="custom-nav-list"> <li><a href="#" data-icon="custom" class="ui-btn-active" id="custom-li-1">Home</a></li> <li><a href="#" data-icon="grid" id="custom-li-2">Second page</a></li> <li><a href="#" data-icon="star" id="custom-li-3">Third page</a></li> </ul> </div> </div> </div>