jQuery Mobile 工具栏学习笔记
概述
jQuery Mobile 工具栏是一种常用的布局元素，用于在 web 应用中显示导航、标题和其他重要信息。它可以包含按钮、链接、文本和图标等各种组件，使得用户能够方便地访问应用程序的各种功能。
创建工具栏
要创建一个 jQuery Mobile 工具栏，可以使用以下代码：
htmlCopy Code<div data-role="header">
<h1>MyApp</h1>
</div>
这将创建一个带有标题 "MyApp" 的工具栏。其中，data-role 属性指定该 div 元素的角色为 "header"，表示这是一个工具栏。h1 标签中的文本将作为工具栏的标题显示出来。
要添加链接和按钮等其他组件，可以将它们嵌套在 header 里面。例如：
htmlCopy Code<div data-role="header">
<h1>MyApp</h1>
<a href="#menu" data-icon="bars">Menu</a>
<a href="#search" data-icon="search">Search</a>
<a href="#settings" data-icon="gear">Settings</a>
</div>
此代码将创建一个包含三个链接的工具栏，链接的文本分别为 "Menu"、"Search" 和 "Settings"，并且每个链接都有一个图标。点击链接将会跳转到相应的位置。
自定义工具栏样式
jQuery Mobile 提供了许多工具栏样式，例如固定在页面顶部或底部的工具栏、可滑动的工具栏、自定义颜色和背景等。要自定义工具栏样式，可以使用以下代码：
htmlCopy Code<div data-role="header" data-position="fixed" data-theme="b">
<h1>MyApp</h1>
<a href="#menu" data-icon="bars">Menu</a>
<a href="#search" data-icon="search">Search</a>
<a href="#settings" data-icon="gear">Settings</a>
</div>
这将创建一个固定在页面顶部、背景色为蓝色的工具栏，并添加三个带图标的链接。
实例
以下是一个完整的示例，展示了如何创建一个具有自定义样式的 jQuery Mobile 工具栏。
htmlCopy Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Mobile 工具栏学习笔记</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.3.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" data-theme="b">
<h1>MyApp</h1>
<a href="#menu" data-icon="bars">Menu</a>
<a href="#search" data-icon="search">Search</a>
<a href="#settings" data-icon="gear">Settings</a>
</div>
<div data-role="content">
<!-- 在这里添加页面内容 -->
</div>
</div>
</body>
</html>
运行以上代码将会创建一个具有固定在页面顶部的蓝色工具栏，其中包含三个带图标的链接。