按钮和导航条

代码中a标签的顺序决定了按钮显示的位置。几乎所有的设备中都能取得一致的显示效果。

ui-btn-active这个class可以使得你的按钮显示为被选择状态。当你点击一个按钮并导航到该页面的另一个部分时，jQueryMobile会自动加上一个back按钮

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">

<script src="http://code.jquery.com/jquery-1.5.min.js"></script>

<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

<div data-role="page" id="menu">

   <!--代码中a标签的顺序决定了按钮显示的位置-->

   <div data-role="header" data-position="inline">

   <a href="cancel.html" data-icon="delete">Cancel</a>

   <h1>Edit Contact</h1>

   <a href="save.html" data-icon="check">Save</a>

 </div>

   

   <div data-role="content">   

      <p>What vehicles do you like?</p>          

   </div><!-- /content -->

   

   <!--

   ui-btn-active这个class可以使得你的按钮显示为被选择状态。

   当你点击一个按钮并导航到该页面的另一个部分时，jQueryMobile会自动加上一个back按钮

   -->

   <div data-role="footer">

<div data-role="navbar">

   <ul>

      <li><a href="#nav1" class="ui-btn-active">One</a></li>

      <li><a href="#nav2">Two</a></li>

   </ul>

</div><!-- /navbar -->

   </div><!-- /footer -->

</div><!-- /page -->

<div data-role="page" id="nav1">

   <div data-role="header">

      <h1>Nav Screen 1</h1>

   </div><!-- /header -->

   <div data-role="content">   

Screen for Navigation One   </div><!-- /content -->

   <div data-role="footer">

<h4>Additional Footer information</h4>

   </div><!-- /footer -->

</div><!-- /page -->

<div data-role="page" id="nav2">

   <div data-role="header">

      <h1>Nav Screen 2</h1>

   </div><!-- /header -->

   <div data-role="content">   

Screen for Navigation Two

   </div><!-- /content -->

<div data-role="footer">

<h4>Additional Footer information</h4>

</div><!-- /footer -->

</div><!-- /page -->