使用组件
链接和页面只是移动网页设计中一个很小的部分，APP程序(比如采用Object-C，C#，java等在Android或者IOS设备上创建的本地应用程序)快速增长的同时产生了丰富的控件和组件(例如菜单栏，列表等控件)使得开发者可以很方便地创建复杂的应用程序，这正是许多移动网页开发者第二个巨大的挑战——因为在原生的HTML里面并没有这些控件或者组件。
针对这一问题，jQueryMobile当前正在创建一组非常有用的组件。以下是在alpha版本中已经发布的组件：
· Pages(页面)
· Dialog boxes(对话框)
· Toolbars(工具栏)
· Buttons(按钮)
· Content formatting(内容格式化)
· Form elements(表单)
· List views(列表)
只要你懂的一点点的HTML，你会发现添加这些组件并不困难，接下来我们看几个例子。
为页面添加header和footer
上面的模版已经为你展示了如何轻松地创建工具栏(header，footer)。我们知道，在不同尺寸的屏幕上创建自适应工具栏通常都是非常难的活儿。而现在，jQueryMobile让你能够非常容易地创建一个带有一个居中标题和两个按钮并且自适应任何屏幕尺寸的header：
<a href="cancel.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="save.html" data-icon="check">Save</a>
</div>
代码中a标签的顺序决定了按钮显示的位置。以上代码在几乎所有的设备中都能取得一致的显示效果。
header和footer同样可以被自定义为你想要的样式，比如改造一个导航条：你可以添加一些按钮在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 -->
从这些代码你可以发现jQueryMobile不过是一些简单的HTML代码，导航条依然是div，而诸如ui-btn-active这个class可以使得你的按钮显示为被选择状态。
当你点击一个按钮并导航到该页面的另一个部分时，jQueryMobile会自动加上一个back按钮，以下的代码结构可以清晰地展现这一过程：
<div data-role="header">
<h1>Navigation</h1>
</div><!-- /header -->
<div data-role="content">
Navigation page
</div><!-- /content -->
<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 -->
