📌  相关文章
📜  如何使用 jQuery Mobile 创建菜单弹出窗口？(1)

📅  最后修改于: 2023-12-03 15:08:21.226000             🧑  作者: Mango

如何使用 jQuery Mobile 创建菜单弹出窗口？

jQuery Mobile 是一个优秀的 UI 框架，可以帮助我们快速地构建移动端应用程序。其中有一个非常实用的组件——菜单弹出窗口。它可以在一个页面中弹出一个菜单，用户点击菜单项后，可以进行相应的操作。

下面我们来介绍如何使用 jQuery Mobile 创建菜单弹出窗口。

步骤一：引入 jQuery Mobile

首先，我们需要在页面中引入 jQuery Mobile 的库文件。可以通过以下代码来实现：

<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>
步骤二：创建菜单弹出窗口

接着，我们需要在页面中创建一个菜单弹出窗口。可以通过以下代码来实现：

<div data-role="popup" id="myPopup">
  <ul data-role="listview">
    <li><a href="#">菜单项一</a></li>
    <li><a href="#">菜单项二</a></li>
    <li><a href="#">菜单项三</a></li>
  </ul>
</div>

其中，data-role="popup" 表示这是一个弹出窗口，id="myPopup" 是该弹出窗口的唯一标识符。data-role="listview" 表示这是一个列表视图，<li> 标签表示列表项，<a> 标签表示菜单项。

步骤三：触发菜单弹出窗口

当用户点击页面上的某个按钮或链接时，我们需要触发菜单弹出窗口。可以通过以下代码来实现：

<a href="#myPopup" data-rel="popup" class="ui-btn">打开菜单弹出窗口</a>

其中，href="#myPopup" 表示该链接要弹出 id="myPopup" 的弹出窗口，data-rel="popup" 表示打开弹出窗口，class="ui-btn" 表示该链接使用 jQuery Mobile 的按钮样式。

步骤四：关闭菜单弹出窗口

当用户选择菜单项后，我们需要关闭菜单弹出窗口。可以通过以下代码来实现：

<a href="#" data-rel="back" class="ui-btn">关闭菜单弹出窗口</a>

其中，data-rel="back" 表示关闭上一个触发器（即菜单弹出窗口），class="ui-btn" 表示该链接使用 jQuery Mobile 的按钮样式。

完整代码示例
<!DOCTYPE html>
<html>
<head>
  <title>菜单弹出窗口示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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">
      <h1>菜单弹出窗口示例</h1>
    </div>

    <div data-role="content">
      <a href="#myPopup" data-rel="popup" class="ui-btn">打开菜单弹出窗口</a>

      <div data-role="popup" id="myPopup">
        <ul data-role="listview">
          <li><a href="#">菜单项一</a></li>
          <li><a href="#">菜单项二</a></li>
          <li><a href="#">菜单项三</a></li>
        </ul>
      </div>

      <a href="#" data-rel="back" class="ui-btn">关闭菜单弹出窗口</a>
    </div>

    <div data-role="footer">
      <h4>&copy; 2021-2050</h4>
    </div>
  </div>

</body>
</html>

以上就是使用 jQuery Mobile 创建菜单弹出窗口的完整代码示例。