1, set the navigation bar icon, just add the Data-icon property in the Subclass navigation button, the property value can be set to Arrow-l, Arrow-r, Arrow-u, arrow-d, delete, plus, minus, check, gear. Set the icon location just add another attribute Data-iconpos, the property value can be set to top, left, right, bottom.
2. Sample code:
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta name= "viewport" content= "width=device-width,initial-scale=1"/>
<link href= "Css/jquery.mobile-1.2.0.min.css" rel= "Stylesheet" type= "Text/css"/>
<script src= "js/jquery-1.8.3.min.js" type "Text/javascript" ></script>
<script src= "Js/jquery.mobile-1.2.0.min.js" type= "Text/javascript" ></script>
</HEAD>
<BODY>
<div data-role= "page" id= "E1" >
<div data-role= "Header" >
<div data-role= "NavBar" data-iconpos= "left" >
<ul>
<li><a href= "#" class= "Ui-btn-active"data-icon= "Info"> Books </a></li>
<li><a href= "#" data-icon= "gear" > Music </a></li>
<li><a href= "#" data-icon= "Gear" > Film </a></li>
</ul>
</div>
</div>
<div data-role= "Content" ><p> this is the book page </p></div>
<div data-role= "Footer" ></BODY>
</HTML>
3. Preview of Effect diagram:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
