如何使用jQuery Mobile创建一个对话框弹出窗口

我为您提供如下攻略：

关于jQuery Mobile

jQuery Mobile 是一个基于 jQuery 的开源框架，用于创建移动端的网页和应用程序。它的设计目的是提供一个易于使用的 API 给开发人员，让他们可以在智能手机和平板电脑等移动设备上构建实用和吸引人的应用程序。

创建对话框弹出窗口

在 jQuery Mobile 中，可以使用 dialog 组件来创建对话框弹出窗口。

首先，在 <head> 标签中添加以下代码：

<!-- 引入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>

然后，在你的HTML代码中，添加对话框内容和结构：

<!-- 按钮 -->
<a href="#dialog" data-role="button" data-inline="true" data-rel="dialog">打开对话框</a>

<!-- 对话框 -->
<div data-role="dialog" id="dialog" data-close-btn="right">
  <div data-role="header">
    <h1>myDialog</h1>
  </div>
  <div data-role="content">
    <p>这是一个对话框弹出窗口。</p>
  </div>
  <div data-role="footer">
    <a href="#" data-icon="delete" data-rel="back">Close</a>
  </div>
</div>

以上代码中，<a> 标签设置了 data-role="button" 属性，表示该元素为一个按钮；data-inline="true" 属性设置为 true，表示按钮的宽度为其内部内容的宽度。

<div> 标签设置了 data-role="dialog" 属性，表示该元素为一个对话框弹出窗口；id 属性值为 dialog，与 <a> 标签中的 href 属性值对应；data-close-btn="right" 属性表示关闭按钮的位置是右侧。

通过以上代码，当用户点击打开对话框的按钮时，一个对话框弹出窗口就会出现在用户的屏幕上。

添加更多内容

还可以为对话框添加更多内容和功能，例如表单、列表或按钮等。

以下是对话框内添加表单和按钮的示例代码：

<div data-role="dialog" id="dialog" data-close-btn="right">
  <div data-role="header">
    <h1>myDialog</h1>
  </div>
  <div data-role="content">
    <form>
       <label for="input-name">姓名：</label>
       <input type="text" name="fname" id="input-name">
       <label for="input-email">邮箱：</label>
       <input type="email" name="femail" id="input-email">
       <button type="submit" data-theme="b">提交</button>
    </form>
  </div>
  <div data-role="footer">
    <a href="#" data-icon="delete" data-rel="back">关闭</a>
  </div>
</div>

在 <div data-role="content"> 中添加 <form> 标签，表示表单内容。

记得设置 data-rel="back" 属性，以便用户可以通过点击关闭按钮或按下 “返回” 按钮来关闭对话框。

第二个示例：动态生成对话框

除了静态地创建对话框，还可以使用 JavaScript 动态生成对话框，这样就可以根据实际需要来配置对话框内容。

以下是动态创建对话框的示例代码：

<!-- 按钮 -->
<a href="#" data-role="button" id="btn-dialog">打开对话框</a>

<!-- JS代码 -->
<script>
  $(document).on("pagecreate", function() {
    $("#btn-dialog").on("click", function() {
      $('<div>').simpledialog2({
        mode: 'button',
        headerText: '提示框',
        headerClose: true,
        buttonPrompt: '这是一个对话框弹出窗口',
        buttons : {
          '确定': {
            click: function () {
              $('#dialogoutput').empty();
              $('#dialogoutput').append('<p>您点击了确定按钮！</p>');
            }
          },
          '取消': {
            click: function () {
              $('#dialogoutput').empty();
              $('#dialogoutput').append('<p>您点击了取消按钮！</p>');
            }
          },
        }
      });
    });
  });
</script>

以上代码使用了 simpledialog2 插件来创建对话框。

在 $("document").ready() 方法中，通过 $("#btn-dialog").on("click", function() 方法绑定按钮的 “click” 事件，当用户点击按钮时，会弹出对话框。

配置对话框的属性值的方法是设置 mode、headerText、headerClose 和 buttonPrompt 属性。

最后，使用 button 属性来指定对话框中的按钮。

通过以上代码，在用户单击按钮时，一个包含两个按钮的对话框就会弹出。当用户点击其中的一个按钮时，页面上会显示一个文本，表示用户点击了哪个按钮。

总之，以上是使用 jQuery Mobile 创建对话框弹出窗口的完整攻略，包括两个示例代码。

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

如何使用jQuery Mobile创建一个对话框弹出窗口

关于jQuery Mobile

创建对话框弹出窗口

添加更多内容

第二个示例：动态生成对话框

相关文章