博客

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

  • Post category:jquery

下面是使用jQuery Mobile创建一个弹出表单的完整攻略：

1. 引入jQuery Mobile库

首先需要在HTML文档中引入jQuery Mobile库，可以从官网下载最新的库文件，或使用CDN引入：

<!-- 引入jQuery库 -->
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入jQuery Mobile库 -->
<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.css" />
<script src="//code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.js"></script>

这里以CDN的方式引入库文件，如果使用本地文件，则需要将文件路径改为本地路径。

2. 创建弹出表单的HTML结构

接下来需要创建弹出表单的HTML结构，可以使用jQuery Mobile提供的Popup组件来实现，方法是在页面中添加一个popup元素，然后在其中添加表单元素。

示例代码如下：

<!-- 弹出表单的HTML结构 -->
<div data-role="popup" id="popupForm" data-overlay-theme="b" data-dismissible="false">
  <form>
    <div data-role="header">
      <h3>用户注册</h3>
    </div>

    <div data-role="content">
      <div data-role="fieldcontain">
        <label for="name">用户名:</label>
        <input type="text" name="name" id="name" value="" />
      </div>
      <div data-role="fieldcontain">
        <label for="email">电子邮件:</label>
        <input type="email" name="email" id="email" value="" />
      </div>
      <div data-role="fieldcontain">
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" value="" />
      </div>
    </div>

    <div data-role="footer">
      <button type="submit" data-inline="true" data-theme="b">注册</button>
      <button type="button" data-inline="true" data-rel="back">取消</button>
    </div>
  </form>
</div>

这里使用了一个id为popupForm的popup元素来展示表单，表单中包含了用户名、电子邮件和密码三个输入框，以及两个按钮用来提交和取消。

3. 触发弹出表单的事件

创建好了弹出表单的HTML结构后，需要在页面中添加一个触发事件，以便让用户点击后弹出表单。

常见的触发事件有按钮点击事件、页面加载事件等等，这里以按钮点击事件为例，示例代码如下：

<!-- 触发弹出表单的事件 -->
<a href="#popupForm" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-plus ui-btn-icon-left ui-btn-b">注册</a>

这里使用了一个按钮元素，点击后会弹出一个ID为popupForm的popup元素，即弹出表单。需要注意的是，要将data-rel属性设置为popup，才能触发弹出操作。

4. 完整示例

下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>弹出表单示例</title>

  <!-- 引入jQuery库和jQuery Mobile库 -->
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.css" />
  <script src="//code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.js"></script>
</head>
<body>

  <!-- 弹出表单的HTML结构 -->
  <div data-role="popup" id="popupForm" data-overlay-theme="b" data-dismissible="false">
    <form>
      <div data-role="header">
        <h3>用户注册</h3>
      </div>

      <div data-role="content">
        <div data-role="fieldcontain">
          <label for="name">用户名:</label>
          <input type="text" name="name" id="name" value="" />
        </div>
        <div data-role="fieldcontain">
          <label for="email">电子邮件:</label>
          <input type="email" name="email" id="email" value="" />
        </div>
        <div data-role="fieldcontain">
          <label for="password">密码:</label>
          <input type="password" name="password" id="password" value="" />
        </div>
      </div>

      <div data-role="footer">
        <button type="submit" data-inline="true" data-theme="b">注册</button>
        <button type="button" data-inline="true" data-rel="back">取消</button>
      </div>
    </form>
  </div>

  <!-- 触发弹出表单的事件 -->
  <a href="#popupForm" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-plus ui-btn-icon-left ui-btn-b">注册</a>

</body>
</html>

在页面中运行这个示例代码，点击“注册”按钮后将弹出一个表单，用户可以在表单中输入注册信息并提交，提交按钮的点击事件可以在JavaScript代码中处理。

Tags: