套用UI组件
jQuery Mobile各种可视化组件的语法大多数与HTML5标记大同小异，这里不再阐述，仅列出这些常用的组件。由于按钮（Button）和列表（List View）功能变化比较大，后面将对其进行详细介绍。
文本框（Text Input）
input type="text" name="uname" id="uid" value="">
范围滑块（Range Slider）
<input type="range" name="rangebar" id="rangebarid" value="25" min="0" max="100" data-highlight="true"/>
单选按钮（Radio Button）
<fieldset data-role="controlgroup">
<legend>最喜欢的水果：</legend>
<input type="radio" name="radio-choice" id="radio-choice-1"
value="choice-1" checked="checked"/>
<label for="radio-choice-1">苹果</label>
<input type="radio" name="radio-choice" id="radio-choice-2"
value="choice-2" />
<label for="radio-choice-2">香蕉</label>
<input type="radio" name="radio-choice" id="radio-choice-3"
value="choice-3" />
<label for="radio-choice-3">柠檬</label>
</fieldset>
复选框（Check Box）
/*第一种写法*/
<label><input type="checkbox" name="checkbox-0" checked/>我同意</label>
/*第二种写法*/
<input type="checkbox" name="checkbox-1" id="checkbox-1"/>
<label for="checkbox-1">我不同意</label>
选择菜单（Select Menu）
<label for="select-choice-0" class="select">每天上网的时长：</label>
<select name="select-choice-0" id="select-choice-1" data-mini="true">
<option value="standard">少于1小时</option>
<option value="standard">1小时</option>
<option value="rush">2小时</option>
<option value="express">3小时</option>
<option value="overnight">3小时以上</option>
</select>
按钮(Button)
链接按钮(link button)
在前面的范例种曾经利用<a>标记产生文字超链接，让页面能够进行切换，如果要让超链接通过按钮显示，就要使用data-role="button"属性，语法如下：
<a href="#second" data-role="button">第二页</a>data-mini="true"属性可以让按钮及字体小一号显示
表单按钮（form button）
也可以使用data-icon属性再加入小图标，语法如下：
<a href="#" data-role="button" data-icon="delete">删除</a>
| 图标参数 | 说明 |
| data-icon="delete" | 删除 |
| data-icon="arrow-l" | 向左箭头 |
| data-icon="arrow-r" | 向右箭头 |
| data-icon="arrow-u" | 向上箭头 |
| data-icon="arrow-d" | 向下箭头 |
| data-icon="plus" | 加号 |
| data-icon="minus" | 减号 |
| data-icon="check" | 复选 |
| data-icon="gear" | 齿轮 |
| data-icon="refresh" | 重新整理 |
| data-icon="forward" | 前进 |
| data-icon="back" | 后退 |
| data-icon="star" | 星号 |
| data-icon="grid" | 表格 |
| data-icon="alert" | 警告 |
| data-icon="info" | 信息 |
| data-icon="home" | 首页 |
| data-icon="search" | 搜索 |
小图片默认会显示在按钮的左侧，如果想更换图标的位置，只要用data-iconpos属性指定上（top）、下（bottom）、右（right）位置即可，语法如下
<a href="#" data-role="button" data-icon="alert" data-iconpos="top">警告</a>
<a href="#" data-role="button" data-icon="home" data-iconpos="right">主页</a>
如果不想出现文字，将data-iconpos的属性值指定为notext，就只会显示按钮而没有文字了。你会发现制作完成的按钮会以屏幕宽度为自身的宽度，如果想要制作紧凑的按钮，可以加上data-inline="true"属性。
<a href="#" data-role="button" data-icon="star" data-inline="true">星号</a>
<a href="#" data-role="button" data-icon="refresh" data-iconpos="top" data-inline="true">重新调整</a>
<a href="#" data-role="button" data-icon="home" data-iconpos="notext"data-inline="true">搜索</a>
组按键
有时候想把按钮排在一起，例如导航栏一整排的按钮，可以先用data-role="contrlgroup"属性定义为组，再将按钮放在这个<div>里面，代码如下：
<div data-role="controlgroup">
<a href="ch11_01.html" data-role="button">首页</a>
<a href="#" data-role="button">运动</a>
<a href="#" data-role="button">电影</a>
</div>
显示的按钮默认为垂直排列，用data-type="horizontal"属性指定为水平即可，如下表达式：
<div data-role="controlgroup" data-type="horizontal">
列表
List View是移动设备最常见的组件，因为手机的屏幕小，所以数据适合以列表方式显示，例如商品列表、购物车、新闻等都很适合利用List View组件来产生。再jQuery Mobile中要操作这样的UI非常简单，只要用编号列表（ordered list）<ol>标记加上<li>标记，或是项目列表(unordered list)<ul>标记加上<li>标记，并在<ul>标记或<ol>标记中加上data-role="listview"属性即可。下面以<ol>标记为例进行说明，代码如下：
<ol data-role="listview">
<li><a href="chinese.html">语文</a> </li>
<li><a href="math.html">数学</a> </li>
<li><a href="english.html">英语</a> </li>
</ol>执行结果如下：
我们还可以将data-insert属性设为true，让listview不要与屏幕同宽并加上圆角，代码如下：
<ol data-role="listview" data-inset="true">
加入图片和说明
<li><a href="chinese.html">
<img src="images/chinese.jpg"/>
<h3>语文</h3>
<p>时间：星期一 人数：15人</p>
</a>
</li>执行结果如下，这就跟我们之前学过的在HTML文件中加入图片和文字一样简单：
拆分按钮列表(Split button list)
如果要将列表与按钮分开，也就是单击列表时连接到某个网页，而按钮又可链接到另一个网页，这就可以使用拆分按钮列表，程序很简单，只需要在<li>标记内加入两组<a>标记，jQuery Mobile就会自动按照data-icon属性设置的样式将用户界面处理好，代码如下：
<li><a href="math.html">
<img src="images/math.jpg"/>
<h3>数学</h3>
<p>时间：星期一 人数：20人</p>
</a>
<a href="#taking" data-icon="gear"></a>
</li>执行结果如下：
计数泡泡(Count bubble)
计数泡泡在列表中显示数字时使用，只要在<li>标记中加入如下标记即可：
<li><a href="english.html">
<img src="images/eng.jpg">
<h3>英语</h3>
<p>时间：星期一 人数：18人</p>
<span class="ui-li-count">18</span>
</a>
<a href="#taking" data-icon="gear"></a>
</li>执行结果如下：
