jQuery Mobile 的 data-* 属性 是它的灵魂！
它让你几乎不用写 CSS 和 JS，就能做出一个看起来像原生 App 的移动网页。下面是截至 2025 年依然最全、最实用的 jQuery Mobile data-* 属性速查表 + 实战技巧（基于 1.4.5，最稳定版）。
一、核心全局 data-*（最常用 Top 10）
| 属性 | 可选值 | 作用说明 | 推荐指数 |
|---|---|---|---|
data-role="page" | – | 定义一个页面（必须） | ★★★★★ |
data-role="header" | – | 固定顶部栏 | ★★★★★ |
data-role="content" | – | 主要内容区域（可省略） | ★★★★ |
data-role="footer" | – | 固定底部栏 | ★★★★★ |
data-role="listview" | – | 自动美化 ul/li 为列表 | ★★★★★ |
data-role="button" | – | a/input/button 自动变成美观按钮 | ★★★★★ |
data-theme="a" 或 "b" | a–z | 切换主题色（a=黑 b=灰） | ★★★★★ |
data-icon="home" | 20+ 种图标（home, plus, delete…） | 给按钮加图标 | ★★★★★ |
data-position="fixed" | fixed | header/footer 吸顶吸底 | ★★★★★ |
data-transition="slide" | slide/fade/pop/slidedown…（8种） | 页面切换动画 | ★★★★★ |
二、页面专属 data-*（超级好用）
| 属性 | 可选值 | 说明 |
|---|---|---|
data-title="标题" | 任意文字 | 动态设置浏览器标题和后退按钮文字 |
data-url="page1" | 任意字符串 | 自定义 hash，方便 changePage 使用 |
data-add-back-btn="true" | true/false | 自动添加返回按钮 |
data-back-btn-text="返回" | 任意文字 | 自定义返回按钮文字 |
data-fullscreen="true" | true | 全屏模式（隐藏状态栏，iOS 专用） |
data-dialog="true" | true | 以对话框形式打开页面 |
三、控件专属 data-*（常用 20+）
| 控件类型 | 属性示例 | 说明 |
|---|---|---|
| Listview | data-inset="true" | 圆角内嵌列表 |
data-filter="true" | 自动添加搜索框 | |
data-divider-theme="a" | 分组标题主题 | |
data-split-icon="delete" | 每行右侧出现小图标按钮 | |
| Button | data-inline="true" | 按钮内联（不占整行） |
data-corners="false" | 去掉圆角 | |
data-iconpos="notext" | 只显示图标不显示文字 | |
| Navbar | data-role="navbar" | 底部/顶部选项卡 |
| Collapsible | data-collapsed="false" | 默认展开 |
data-collapsed-icon="arrow-d" | 展开时图标 | |
| Slider | data-highlight="true" | 轨道高亮 |
| Flip Switch | data-role="flipswitch" | 滑动开关 |
| Popup | data-role="popup" | 弹出层 |
data-overlay-theme="b" | 背景遮罩主题 | |
data-dismissible="false" | 点击外面不关闭 |
四、2025 年实战中最实用的组合写法（直接复制）
<!-- 1. 吸顶吸底 + 返回按钮 + 主题 -->
<div data-role="page" id="home" data-theme="a" data-title="首页">
<div data-role="header" data-position="fixed" data-add-back-btn="true" data-back-btn-text="返回">
<h1>我的应用</h1>
</div>
<div role="main" class="ui-content">
<!-- 2. 带搜索 + 分割线 + 右侧删除按钮的列表 -->
<ul data-role="listview" data-inset="true" data-filter="true"
data-filter-placeholder="搜索任务..." data-split-icon="delete" data-split-theme="a">
<li data-role="list-divider">今天</li>
<li><a href="#detail">开会讨论需求</a><a href="#">删除</a></li>
<li><a href="#detail">写代码</a><a href="#">删除</a></li>
</ul>
<!-- 3. 按钮组 -->
<div data-role="controlgroup" data-type="horizontal" class="ui-mini">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left" data-inline="true">新增</a>
<a href="#" class="ui-btn ui-icon-refresh ui-btn-icon-left" data-inline="true">刷新</a>
</div>
</div>
<!-- 4. 底部导航栏 -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" class="ui-btn-active" data-icon="home">首页</a></li>
<li><a href="#list" data-icon="grid">列表</a></li>
<li><a href="#my" data-icon="user">我的</a></li>
</ul>
</div>
</div>
</div>五、页面切换动画（最全 8 种）
<a href="#page2" data-transition="slide">右滑进入</a>
<a href="#page2" data-transition="slideup">上滑进入</a>
<a href="#page2" data-transition="slidedown">下滑进入</a>
<a href="#page2" data-transition="fade">淡入</a>
<a href="#page2" data-transition="flip">翻转</a>
<a href="#page2" data-transition="turn">翻页</a>
<a href="#page2" data-transition="flow">流动</a>
<a href="#page2" data-transition="pop">弹出</a>
<!-- 反向加 data-direction="reverse" -->
<a href="#page1" data-transition="slide" data-direction="reverse">左滑返回</a>六、2025 年写 jQuery Mobile 项目必备小技巧
- 永远不要忘记这三个属性：
<meta name="viewport" content="width=device-width, initial-scale=1">
<div data-role="page">...</div>
data-position="fixed"- 想让页面切换更快？全局关闭动画：
$.mobile.defaultPageTransition = "none";- 想改默认主题？全局设置：
$.mobile.activePageTheme = "b"; // 所有新页面默认用 b 主题- 动态创建控件后必须 refresh：
$("#mylist").listview("refresh");
$("#myslider").slider("refresh");这张表 + 上面实例，足够你 2025 年在任何老项目里横着走了！
需要我给你一个 「jQuery Mobile data-* 属性一页纸速查表（PDF/图片版）」 或者 「100 个经典 data-* 组合模板」，直接告诉我，我立刻打包发你！
