jQuery Mobile 导航栏学习笔记

1. 引入jQuery Mobile文件

在使用jQuery Mobile之前，需要先引入相关的文件，包括jquery.js和jquery.mobile.min.css及jquery.mobile.min.js。可以使用以下代码进行引入：

Copy Code
<head>
  <meta charset="utf-8">
  <title>jQuery Mobile 导航栏学习笔记</title>
  <link rel="stylesheet" href="jquery.mobile.min.css">
  <script src="jquery.js"></script>
  <script src="jquery.mobile.min.js"></script>
</head>

2. 创建导航栏

使用<div>标签创建一个页面级别的导航栏，可以使用以下代码创建一个基本的导航栏：

Copy Code
<div data-role="navbar">
  <ul>
    <li><a href="#" class="ui-btn-active">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</div>

其中，data-role="navbar"用于指定该元素为一个导航栏，<ul>标签内包含若干个<li>元素，每个<li>元素内包含一个<a>标签，点击该标签会跳转到对应的页面。

3. 自定义导航栏样式

可以使用data-theme属性自定义导航栏的样式，例如：

Copy Code
<div data-role="navbar" data-theme="b">
  <ul>
    <li><a href="#" class="ui-btn-active">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</div>

其中，data-theme属性值为b表示使用jQuery Mobile提供的样式主题，也可以自定义样式主题。

4. 实例

以下是一个完整的实例代码：

Copy Code
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery Mobile 导航栏学习笔记</title>
  <link rel="stylesheet" href="jquery.mobile.min.css">
  <script src="jquery.js"></script>
  <script src="jquery.mobile.min.js"></script>
</head>
<body>
  <div data-role="navbar" data-theme="b">
    <ul>
      <li><a href="#" class="ui-btn-active">首页</a></li>
      <li><a href="#">新闻</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
  </div>
</body>
</html>

效果图如下：

导航栏示例