📌  相关文章
📜  如何使用 jQuery Mobile 创建一个基本的弹出按钮？(1)

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

如何使用 jQuery Mobile 创建一个基本的弹出按钮？

jQuery Mobile 是一个面向移动设备的 Web 开发框架，它提供了很多易于使用的 UI 组件，其中包括弹出按钮。弹出按钮是一种常见的 UI 设计元素，它可以在用户点击按钮的时候弹出一个菜单或者对话框。

下面是如何使用 jQuery Mobile 创建一个基本的弹出按钮的步骤：

  1. 引入 jQuery 和 jQuery Mobile 库文件。
<head>
  <meta charset="UTF-8">
  <title>jQuery Mobile 弹出按钮</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <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/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
  1. 创建一个带有弹出菜单的按钮。
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>弹出按钮示例</h1>
    </div><!-- /header -->

    <div data-role="content">
      <a href="#" id="popupButton" data-role="button" data-rel="popup" data-position-to="window" data-transition="pop">弹出菜单</a>
      <div data-role="popup" id="popupMenu" data-theme="a">
        <ul data-role="listview" data-inset="true">
          <li><a href="#">选项 1</a></li>
          <li><a href="#">选项 2</a></li>
          <li><a href="#">选项 3</a></li>
        </ul>
      </div><!-- /popup -->
    </div><!-- /content -->
  </div><!-- /page -->
</body>

在上面的代码中，我们创建了一个 id 为 popupButton 的链接元素，并将其标记为一个按钮（data-role="button"）。我们还添加了其他 data-* 属性，以指定按钮应该弹出菜单（data-rel="popup"），弹出菜单的位置（data-position-to="window"），以及弹出菜单的过度效果（data-transition="pop"）。

我们还创建了一个 id 为 popupMenu 的控件，并将其标记为一个 popup（data-role="popup"）。其中，我们添加了一个包含三个选项的列表视图（data-role="listview"）。您可以自由地修改这个列表，以包含您自己的选项。

  1. 初始化弹出框。
$(document).on("pagecreate", function() {
  $("#popupButton").on("click", function() {
    $("#popupMenu").popup("open");
  });
});

在上面的代码中，我们使用 jQuery Mobile 的事件模型，在页面加载完成时初始化了弹出框。当 id 为 popupButton 的元素被点击时，我们使用 $("#popupMenu").popup("open") 命令打开弹出框。

现在，您已经了解如何使用 jQuery Mobile 创建一个基本的弹出按钮。您可以使用这个示例作为起始点，自由地扩展它以满足您的需求。

参考资料