jQuery Mobile 按钮（Buttons）详解
jQuery Mobile 的 按钮 是最常用组件之一，支持 触控优化、自动样式、图标、内联、角标 等特性。
无需写 JS，只需 HTML + data-* 属性即可。
1. 基本按钮类型
| 类型 | 写法 | 效果 |
|---|
| 链接按钮 | <a href="#" class="ui-btn">链接</a> | 可点击区域大，推荐 |
| 表单按钮 | <button>按钮</button> | 自动增强 |
| 输入按钮 | <input type="button" value="输入"> | 自动增强 |
| 提交按钮 | <input type="submit" value="提交"> | 表单用 |
<a href="#" class="ui-btn">链接按钮</a>
<button class="ui-btn">原生按钮</button>
<input type="button" value="输入按钮">
<input type="submit" value="提交">
2. 按钮样式（ui-btn-*）
| 类名 | 效果 |
|---|
ui-corner-all | 圆角（默认） |
ui-btn-inline | 内联显示（不占整行） |
ui-btn-icon-left | 图标在左 |
ui-btn-icon-right | 图标在右 |
ui-btn-icon-top | 图标在上 |
ui-btn-icon-bottom | 图标在下 |
ui-btn-icon-notext | 只显示图标（无文字） |
ui-shadow | 阴影 |
ui-mini | 小号按钮 |
<a href="#" class="ui-btn ui-btn-inline ui-corner-all ui-shadow ui-mini">
小内联按钮
</a>
3. 内置图标（ui-icon-*）
jQuery Mobile 提供 50+ 矢量图标，无需图片。
| 常用图标 | 类名 |
|---|
| 首页 | ui-icon-home |
| 返回 | ui-icon-back |
| 搜索 | ui-icon-search |
| 删除 | ui-icon-delete |
| 菜单 | ui-icon-bars |
| 箭头右 | ui-icon-arrow-r |
| 箭头左 | ui-icon-arrow-l |
| 星标 | ui-icon-star |
<a href="#" class="ui-btn ui-btn-icon-left ui-icon-home">首页</a>
<a href="#" class="ui-btn ui-btn-icon-right ui-icon-search">搜索</a>
<a href="#" class="ui-btn ui-btn-icon-top ui-icon-star">收藏</a>
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-delete">删除</a>
4. 主题与颜色（data-theme / ui-btn-a）
| 主题 | 类名 |
|---|
| 默认（灰） | 无（或 ui-btn-a） |
| 深色 | ui-btn-b |
| 自定义 | data-theme="a" |
<a href="#" class="ui-btn ui-btn-b">深色按钮</a>
<a href="#" class="ui-btn" data-theme="a">主题 A</a>
5. 按钮组（横向/纵向）
横向按钮组（data-role="controlgroup" + data-type="horizontal"）
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn ui-btn-icon-left ui-icon-home">首页</a>
<a href="#" class="ui-btn ui-btn-icon-left ui-icon-star">收藏</a>
<a href="#" class="ui-btn ui-btn-icon-left ui-icon-gear">设置</a>
</div>
纵向按钮组（默认）
<div data-role="controlgroup">
<a href="#" class="ui-btn">选项1</a>
<a href="#" class="ui-btn ui-btn-active">已选</a>
<a href="#" class="ui-btn">选项3</a>
</div>
6. 完整示例（可直接运行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQM 按钮大全</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>按钮演示</h1>
</div>
<div data-role="main" class="ui-content">
<h3>1. 基础按钮</h3>
<a href="#" class="ui-btn">链接按钮</a>
<button class="ui-btn">原生按钮</button>
<input type="submit" value="提交按钮">
<h3>2. 内联 + 小号</h3>
<a href="#" class="ui-btn ui-btn-inline ui-mini">小</a>
<a href="#" class="ui-btn ui-btn-inline ui-mini">按钮</a>
<h3>3. 带图标</h3>
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">首页</a>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-right">搜索</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">×</a>
<h3>4. 横向按钮组</h3>
<div data-role="controlgroup" data-type="horizontal" class="ui-responsive">
<a href="#" class="ui-btn ui-icon-grid ui-btn-icon-left">网格</a>
<a href="#" class="ui-btn ui-icon-audio ui-btn-icon-left">音乐</a>
<a href="#" class="ui-btn ui-icon-video ui-btn-icon-left">视频</a>
</div>
<h3>5. 纵向按钮组（带选中）</h3>
<div data-role="controlgroup">
<a href="#" class="ui-btn">Wi-Fi</a>
<a href="#" class="ui-btn ui-btn-active">蓝牙</a>
<a href="#" class="ui-btn">数据</a>
</div>
<h3>6. 主题按钮</h3>
<a href="#" class="ui-btn ui-btn-b">深色主题</a>
</div>
<div data-role="footer" data-position="fixed">
<h4>比利时 © 2025</h4>
</div>
</div>
</body>
</html>
7. 按钮事件（JavaScript）
<script>
$(document).on("pagecreate", function() {
$(".ui-btn").on("tap", function() {
alert("按钮被点击：" + $(this).text());
});
// 长按
$(".ui-btn").on("taphold", function() {
console.log("长按了！");
});
});
</script>
8. 最佳实践
| 建议 | 说明 |
|---|
优先使用 <a class="ui-btn"> | 触控区域更大 |
图标按钮用 ui-btn-icon-notext | 节省空间 |
横向组加 class="ui-responsive" | 响应式换行 |
| 避免过多阴影 | 影响性能 |
表单按钮用 <input type="submit"> | 语义正确 |
9. 常见问题
| 问题 | 解决方案 |
|---|
| 图标不显示 | 确保 CDN 加载 images/ 目录 |
| 按钮太小，难点 | 加 ui-mini 反之用 ui-btn-inline |
| 横向组换行 | 加 class="ui-responsive" |
| 点击无反应 | 检查 jQuery 是否先引入 |
10. 按钮图标速查表（部分）
| 图标 | 类名 | 用途 |
|---|
| 首页 | ui-icon-home | 主页 |
| 返回 | ui-icon-back | 返回 |
| 箭头右 | ui-icon-arrow-r | 下一页 |
| 箭头左 | ui-icon-arrow-l | 上一页 |
| 搜索 | ui-icon-search | 搜索 |
| 菜单 | ui-icon-bars | 汉堡菜单 |
| 设置 | ui-icon-gear | 设置 |
| 删除 | ui-icon-delete | 删除 |
| 星标 | ui-icon-star | 收藏 |
| 信息 | ui-icon-info | 提示 |
完整图标列表：https://api.jquerymobile.com/icons/
总结：推荐按钮写法
<!-- 标准导航按钮 -->
<a href="#page2" class="ui-btn ui-btn-icon-right ui-icon-arrow-r ui-corner-all">
下一页
</a>
<!-- 小图标按钮 -->
<a href="tel:10086" class="ui-btn ui-btn-icon-notext ui-icon-phone ui-mini">打电话</a>
<!-- 横向工具栏 -->
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-notext">首页</a>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-notext">搜索</a>
<a href="#" class="ui-btn ui-icon-gear ui-btn-icon-notext">设置</a>
</div>
需要我为你生成：
- 按钮图标大全 PNG 表？
- 底部固定导航按钮栏（类似微信）？
- 带角标的按钮（如未读消息）？
随时告诉我！
