Creating menus in Jquery mobile is very simple. The thing we have to do is, a simple documentation and use some data attributes.
- Create a DIV container to list menu items in it. Add data-role="navbar" attribute to design and convert its items on the menu. And another attribute to use is data-grid for the grid system for menus. Give its value according to the number of menu items.
<div data-role="navbar" data-grid="a"></div> - Now, Use UL or OL tag to list items in it. The menus text should be in an anchor tag.
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn">Home</a></li>
<li><a href="#" class="ui-btn">About</a></li>
</ul>
</div>
Example:-
<div data-role="footer" data-position="fixed">
<!--start menu coding-->
<div data-role="navbar" data-grid="b">
<ul>
<li><a href="#" class="ui-btn">Home</a></li>
<li><a href="#" class="ui-btn">Menu</a></li>
<li><a href="#" class="ui-btn">Next</a></li>
</ul>
</div>
<!--end menu coding-->
</div>Insert icons in menus
Use data-icon attribute to insert an icon name in the anchor tag and data-iconpos attribute in the main container (navbar) for icon position.
<!DOCTYPE html>
<html>
<head>
<title>Jquery Mobile</title>
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed"><h1>Jaischool</h1></div>
<div data-role="main" class="ui-content">
</div>
<div data-role="footer" data-position="fixed">
<!--start menu coding-->
<div data-role="navbar" data-grid="b" data-iconpos="bottom">
<ul>
<li><a href="#" class="ui-btn" data-icon="home">Home</a></li>
<li><a href="#" class="ui-btn" data-icon="grid">Menu</a></li>
<li><a href="#" class="ui-btn" data-icon="arrow-r">Next</a></li>
</ul>
</div>
<!--end menu coding-->
</div>
</div>
</body>
</html>
Publish A Comment