博客

如何使用jQuery Mobile创建一个填充式弹出窗口

  • Post category:jquery

使用jQuery Mobile可以很方便地创建填充式弹出窗口。下面是详细的步骤：

步骤一：引入必要的文件

在使用jQuery Mobile之前，我们需要先引入必要的文件。以下是文件的引入代码：

<!DOCTYPE html>
<html>
<head>
  <title>填充式弹出窗口</title>
  <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>
<!-- The content of the page goes here -->
</body>
</html>

步骤二：创建填充式弹出窗口

在HTML中，我们需要创建一个填充式弹出窗口的容器，使用data-role=”popup”属性来标记它是一个填充式弹出窗口。以下是一个简单的例子：

<div data-role="popup" id="myPopup">
  <p>This is my popup!</p>
</div>

在上述示例代码中，我们创建一个ID为“myPopup”的填充式弹出窗口，其中包含了一段简单的文本内容。

步骤三：打开填充式弹出窗口

为了打开填充式弹出窗口，我们可以使用jQuery Mobile的popup()方法。以下代码演示了如何打开填充式弹出窗口：

<!DOCTYPE html>
<html>
<head>
  <title>填充式弹出窗口</title>
  <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 ui-btn-inline ui-corner-all">打开</a>
      <div data-role="popup" id="myPopup">
        <p>This is my popup!</p>
      </div>
    </div>
    <div data-role="footer">
      <h4>页面底部</h4>
    </div>
  </div>
</body>
</html>

在上述示例代码中，我们创建了一个按钮，当单击该按钮时，会打开一个填充式弹出窗口。

我们需要在创建填充式弹出窗口时给它设置一个ID，然后在按钮中使用data-rel=”popup”这个属性来告诉jQuery Mobile打开哪一个填充式弹出窗口。

示例说明

以下是两个简单的示例，分别演示如何打开并关闭填充式弹出窗口：

示例一

<!DOCTYPE html>
<html>
<head>
  <title>填充式弹出窗口 - 示例一</title>
  <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 ui-btn-inline ui-corner-all">打开</a>
      <div data-role="popup" id="myPopup">
        <p>This is my popup!</p>
        <a href="#" data-rel="back" class="ui-btn ui-btn-inline ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-left ui-btn-b">关闭</a>
      </div>
    </div>
    <div data-role="footer">
      <h4>页面底部</h4>
    </div>
  </div>
</body>
</html>

该示例中，我们除了在填充式弹出窗口中添加了一个“关闭”按钮，其他代码均与步骤三中提到的示例代码相同。当点击“关闭”按钮时，填充式弹出窗口将会被关闭。

示例二

<!DOCTYPE html>
<html>
<head>
  <title>填充式弹出窗口 - 示例二</title>
  <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 ui-btn-inline ui-corner-all">打开</a>
      <div data-role="popup" id="myPopup">
        <p>This is my popup!</p>
        <div data-role="controlgroup" data-type="horizontal" style="text-align:center;">
          <a href="#" class="ui-btn ui-corner-all ui-shadow">OK</a>
          <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow">取消</a>
        </div>
      </div>
    </div>
    <div data-role="footer">
      <h4>页面底部</h4>
    </div>
  </div>
</body>
</html>

在该示例代码中，我们添加了一个水平的controlgroup，其中包含了两个按钮：“OK”和“取消”。当点击“OK”按钮时，弹出窗口将会保持打开状态，而当点击“取消”按钮时，弹出窗口将会被关闭。

Tags: