jQuery Mobile 例子
jQuery Mobile 是一款用于构建移动应用的轻量级框架，它基于 jQuery 核心库，提供了丰富的界面组件和交互效果，让开发者能够快速构建出具有良好用户体验的移动应用。本文将介绍一些常见的 jQuery Mobile 组件，并给出相应的代码示例。
按钮
按钮是移动应用中常用的交互元素之一，jQuery Mobile 提供了多种样式的按钮组件，包括普通按钮、图标按钮、圆角按钮等。以下是一个简单的按钮示例：
<button data-role="button">普通按钮</button>
<a rel="nofollow" href="#" data-role="button" data-icon="home" data-iconpos="notext">图标按钮</a>
<a rel="nofollow" href="#" data-role="button" data-theme="b">圆角按钮</a>
上面的代码中，分别展示了普通按钮、带图标的按钮和定制主题的按钮。通过设置不同的属性值，可以实现不同样式的按钮效果。
导航栏
导航栏是移动应用中重要的导航元素，jQuery Mobile 提供了便捷的导航栏组件，可用于快速构建页面导航。以下是一个简单的导航栏示例：
<div data-role="navbar">
<ul>
<li><a rel="nofollow" href="#" data-icon="home">首页</a></li>
<li><a rel="nofollow" href="#" data-icon="star">收藏</a></li>
<li><a rel="nofollow" href="#" data-icon="gear">设置</a></li>
</ul>
</div>
上面的代码展示了一个包含三个导航链接的导航栏，每个链接都带有一个图标，并且通过设置 data-role="navbar" 属性来标识为导航栏组件。
对话框
对话框是移动应用中常用的提示和确认框组件，jQuery Mobile 提供了简单易用的对话框组件，方便开发者实现弹出框效果。以下是一个简单的对话框示例：
<div data-role="popup" id="popupBasic">
<p>这是一个对话框示例</p>
</div>
<a href="#popupBasic" data-rel="popup" data-role="button">打开对话框</a>
上面的代码中，定义了一个具有简单文本内容的对话框，通过设置 data-role="popup" 和 data-rel="popup" 属性，将其标识为对话框组件，并且可以通过按钮来触发对话框的弹出。
表格
表格是移动应用中展示数据的重要方式，jQuery Mobile 提供了响应式的表格组件，可以适应不同屏幕大小的展示要求。以下是一个简单的表格示例：
<table data-role="table" id="movie-table" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<tr>
<th>电影名称</th>
<th>评分</th>
</tr>
</thead>
<tbody>
<tr>
<td>复仇者联盟</td>
<td>9.0</td>
</tr>
<tr>
<td>阿凡达</td>
<td>8.5</td>
</tr>
</tbody>
</table>
上面的代码展示了一个简单的电影列表表格，通过设置 data-role="table" 和 class="ui-responsive table-stroke" 属性，可以使表格具有响应式布局和边框效果。
通过以上示例，我们展示了几种常见的 jQuery Mobile 组件的用法，包括按钮、导航栏、对话框和表格等。希望这些示例能帮助开发者更好地理解和使用 jQuery Mobile 框架，构建出优秀的移动应用。如果想要查看更多组件示例和文档，可以访问 [jQuery Mobile 官方网站]( 获取更多信息。
