如何使用jQuery Mobile创建一个弹出表单

使用jQuery Mobile创建弹出表单可以按照以下步骤进行操作：

1. 引入jQuery Mobile库

在HTML文档的标签中，使用以下代码导入jQuery Mobile库文件

  <head>
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- 引入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/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>

2. 创建HTML段落和表单元素

在HTML中创建一个段落，其中包含一个按钮，点击按钮弹出表单：

  <body>
    <div data-role="main" class="ui-content">
      <p><a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow">打开表单</a></p>
      <div data-role="popup" id="popupBasic" class="ui-content">
        <form>
          <h3>表单标题</h3>
          <label for="name">姓名:</label>
          <input type="text" name="name" id="name" value="">
          <label for="email">邮箱:</label>
          <input type="email" name="email" id="email" value="">
          <!-- Add more form fields here as needed -->
          <input type="submit" value="提交">
        </form>
      </div>
    </div>
  </body>

3. 使用jQuery Mobile的popup方法创建弹出表单

在jQuery Mobile的popup方法中设置弹出表单的属性，为表单添加样式：

  $(document).on("pagecreate", function() {
    $("#popupBasic").popup({
      dismissible: true, // 弹出表单是否可隐藏
      theme: "a", // 表单主题颜色
      overlayTheme: "b", // 背景区域主题颜色
      transition: "pop", //弹出效果
      positionTo: "window", //弹出位置（居中）
      tolerance: "10,10" //弹出表单位置的容设偏差
    });
  });

使用上述jQuery代码创建的弹出表单，当用户点击"打开表单"按钮时，表单将居中弹出。

下面是JavaScript实现了两个表单按钮的示例代码：

<!DOCTYPE html>
<html lang="en">

<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-3.2.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script>
    $(document).on("pagecreate", function() {
      // 弹出表单1
      $("#popupForm1").popup({
        dismissible: false,
        theme: "a",
        overlayTheme: "b",
        transition: "pop",
        positionTo: "window",
        tolerance: "15,15"
      });
      // 弹出表单2
      $("#popupForm2").popup({
        dismissible: false,
        theme: "a",
        overlayTheme: "b",
        transition: "pop",
        positionTo: "window",
        tolerance: "15,15"
      });
    });
  </script>
</head>

<body>
  <div data-role="page" id="mypage">
    <div data-role="header">
      <h1>我的页面</h1>
    </div>
    <div data-role="content">
      <button id="btn1" data-rel="popup" data-transition="pop" data-position-to="window">打开表单1</button>
      <div data-role="popup" id="popupForm1" class="ui-content">
        <h3>这是表单1</h3>
        <form>
          <label for="name1">姓名1:</label>
          <input type="text" name="name1" id="name1">
          <label for="email1">邮箱1:</label>
          <input type="email" name="email1" id="email1">
          <a href="#" class="ui-btn" data-rel="back">取消</a>
          <a href="#" class="ui-btn ui-btn-b ui-corner-all" data-transition="flow">提交</a>
        </form>
      </div>
      <button id="btn2" data-rel="popup" data-transition="pop" data-position-to="window">打开表单2</button>
      <div data-role="popup" id="popupForm2" class="ui-content">
        <h3>这是表单2</h3>
        <form>
          <label for="name2">姓名2:</label>
          <input type="text" name="name2" id="name2">
          <label for="email2">邮箱2:</label>
          <input type="email" name="email2" id="email2">
          <a href="#" class="ui-btn" data-rel="back">取消</a>
          <a href="#" class="ui-btn ui-btn-b ui-corner-all" data-transition="flow">提交</a>
        </form>
      </div>
    </div>
    <div data-role="footer">
      <h4>版权所有 &copy; 2020 mywebsite.com</h4>
    </div>
  </div>
</body>

</html>

在上述代码中，我们创建了两个按钮，单击其中一个按钮即可弹出对应的表单。

希望这个攻略对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用jQuery Mobile创建一个弹出表单 - Python技术站

如何使用jQuery Mobile创建一个弹出表单

1. 引入jQuery Mobile库

2. 创建HTML段落和表单元素

3. 使用jQuery Mobile的popup方法创建弹出表单

相关文章