jQuery Mobile 工具栏（Toolbars）详解
工具栏（Toolbars） 是 jQuery Mobile 中用于 头部（Header） 和 页脚（Footer） 的核心组件，支持 固定定位、导航栏、按钮组、标题 等，完美适配移动端。
1. 基本结构
<div data-role="page">
<!-- 头部工具栏 -->
<div data-role="header" data-position="fixed">
<h1>页面标题</h1>
</div>
<!-- 内容区 -->
<div data-role="main" class="ui-content">
<p>内容区域</p>
</div>
<!-- 页脚工具栏 -->
<div data-role="footer" data-position="fixed">
<h4>页脚文字</h4>
</div>
</div>关键属性：
data-role="header"/footerdata-position="fixed"→ 固定在顶部/底部（推荐）data-tap-toggle="false"→ 防止点击内容时隐藏
2. 工具栏类型
| 类型 | data-role | 说明 |
|---|---|---|
| 头部栏 | header | 放标题 + 左右按钮 |
| 页脚栏 | footer | 放版权、导航 |
| 导航栏 | navbar | 多按钮横向导航 |
| 控制组 | controlgroup | 按钮分组 |
3. 固定工具栏（推荐）
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<a href="#menu" data-rel="popup" class="ui-btn ui-icon-bars ui-btn-icon-left">菜单</a>
<h1>我的应用</h1>
<a href="#search" class="ui-btn ui-icon-search ui-btn-icon-right">搜索</a>
</div>
data-tap-toggle="false"：防止点击内容时工具栏隐藏
4. 导航栏（Navbar）—— 底部 Tab 切换
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" class="ui-btn-active ui-btn ui-icon-home ui-btn-icon-top">首页</a></li>
<li><a href="#news" class="ui-btn ui-icon-comment ui-btn-icon-top">消息</a></li>
<li><a href="#cart" class="ui-btn ui-icon-shop ui-btn-icon-top">购物车</a></li>
<li><a href="#user" class="ui-btn ui-icon-user ui-btn-icon-top">我的</a></li>
</ul>
</div>
</div>
ui-btn-active：高亮当前页ui-btn-icon-top：图标在上，文字在下
5. 完整示例（可直接运行）
<!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>
<!-- ========== 页面1：首页 ========== -->
<div data-role="page" id="home">
<!-- 头部工具栏 -->
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<a href="#menuPopup" data-rel="popup" data-transition="slidedown"
class="ui-btn ui-icon-bars ui-btn-icon-left ui-corner-all">菜单</a>
<h1>首页</h1>
<a href="#searchPopup" data-rel="popup" class="ui-btn ui-icon-search ui-btn-icon-notext ui-corner-all">搜索</a>
</div>
<!-- 内容区 -->
<div data-role="main" class="ui-content">
<h2>欢迎使用 jQuery Mobile</h2>
<p>当前时间：2025年11月17日 02:50（CET）</p>
<p>国家：比利时 (BE)</p>
<div style="height:600px;"></div> <!-- 模拟长内容 -->
</div>
<!-- 页脚导航栏 -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li><a href="#home" class="ui-btn-active ui-btn ui-icon-home ui-btn-icon-top">首页</a></li>
<li><a href="#news" class="ui-btn ui-icon-comment ui-btn-icon-top">消息</a></li>
<li><a href="#cart" class="ui-btn ui-icon-shop ui-btn-icon-top">购物车</a></li>
<li><a href="#user" class="ui-btn ui-icon-user ui-btn-icon-top">我的</a></li>
</ul>
</div>
</div>
</div>
<!-- ========== 页面2：消息 ========== -->
<div data-role="page" id="news">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<a href="#home" class="ui-btn ui-icon-back ui-btn-icon-left">返回</a>
<h1>消息中心</h1>
</div>
<div data-role="main" class="ui-content">
<p>暂无消息</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" class="ui-btn ui-icon-home ui-btn-icon-top">首页</a></li>
<li><a href="#news" class="ui-btn-active ui-btn ui-icon-comment ui-btn-icon-top">消息</a></li>
<li><a href="#cart" class="ui-btn ui-icon-shop ui-btn-icon-top">购物车</a></li>
<li><a href="#user" class="ui-btn ui-icon-user ui-btn-icon-top">我的</a></li>
</ul>
</div>
</div>
</div>
<!-- ========== 菜单弹窗 ========== -->
<div data-role="popup" id="menuPopup" data-theme="a" style="width:200px;">
<ul data-role="listview" data-inset="true">
<li><a href="#settings">设置</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#" data-rel="back">关闭</a></li>
</ul>
</div>
<!-- ========== 搜索框弹窗 ========== -->
<div data-role="popup" id="searchPopup" data-overlay-theme="b" style="padding:15px; max-width:300px;">
<form>
<input type="search" placeholder="搜索..." data-clear-btn="true">
</form>
</div>
</body>
</html>6. 工具栏属性汇总
| 属性 | 值 | 说明 |
|---|---|---|
data-position="fixed" | — | 固定定位 |
data-tap-toggle="false" | — | 防止隐藏 |
data-fullscreen="true" | — | 全屏模式（隐藏状态栏） |
data-theme="a" / b | — | 主题 |
data-id="myfooter" | 字符串 | 多页共享页脚 |
7. 共享工具栏（多页共用）
<!-- 页面1 -->
<div data-role="page" id="page1">
<div data-role="header" data-id="mainheader" data-position="fixed">
<h1>共享头部</h1>
</div>
...
</div>
<!-- 页面2 -->
<div data-role="page" id="page2">
<div data-role="header" data-id="mainheader" data-position="fixed">
<h1>共享头部</h1>
</div>
...
</div>
data-id相同 → 切换页面时工具栏不刷新
8. 最佳实践
| 建议 | 说明 |
|---|---|
始终使用 data-position="fixed" | 移动端必备 |
加 data-tap-toggle="false" | 防止误操作 |
| 导航栏最多 5 个 | 超过自动换行 |
图标用 ui-btn-icon-top | 更清晰 |
长页面加 padding | 避免内容被工具栏遮挡 |
<div data-role="main" class="ui-content" style="padding-bottom:60px;">9. 常见问题
| 问题 | 解决方案 |
|---|---|
| 工具栏被内容遮挡 | 给 ui-content 加 padding |
| 切换页面工具栏闪烁 | 使用 data-id 共享 |
| 导航栏换行 | 限制 <li> 数量，或用 CSS 控制 |
| iOS 状态栏重叠 | 加 data-fullscreen="true" |
10. 推荐工具栏布局
<!-- 标准头部 -->
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<a href="#" class="ui-btn ui-icon-bars ui-btn-icon-left">菜单</a>
<h1>标题</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-right">搜索</a>
</div>
<!-- 标准底部导航 -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active ui-btn ui-icon-home ui-btn-icon-top">首页</a></li>
<li><a href="#" class="ui-btn ui-icon-grid ui-btn-icon-top">分类</a></li>
<li><a href="#" class="ui-btn ui-icon-shop ui-btn-icon-top">购物车</a></li>
<li><a href="#" class="ui-btn ui-icon-user ui-btn-icon-top">我的</a></li>
</ul>
</div>
</div>总结：工具栏模板
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<a href="#" class="ui-btn ui-icon-菜单 ui-btn-icon-left">菜单</a>
<h1>标题</h1>
<a href="#" class="ui-btn ui-icon-搜索 ui-btn-icon-right">搜索</a>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active ui-btn ui-icon-home ui-btn-icon-top">首页</a></li>
<li><a href="#" class="ui-btn ui-icon-user ui-btn-icon-top">我的</a></li>
</ul>
</div>
</div>需要我为你生成：
- 企业级后台模板（带侧边栏 + 工具栏）？
- 全屏模式 + 沉浸式工具栏？
- 动态切换标题的 JS 方案？
随时告诉我！
