jQuery 弹出框插件 jQuery.ui.dialog 用法分析

概述

jQuery UI Dialog（对话框）是一个易于使用且高度可定制的模态对话框插件，可以用于显示警告、提醒、错误信息、确认等。它基于 jQuery UI Widget，并且来源于 jQuery UI 代码库。

用法

引入 jQuery UI Dialog

在使用 jQuery UI Dialog 之前，需要先在页面中引入 jQuery 和 jQuery UI 的相关文件，例如：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

创建一个简单的对话框

我们可以通过下面的代码创建一个简单的对话框：

$("#dialog").dialog({
  modal: true,
  buttons: {
    Ok: function() {
      $( this ).dialog( "close" );
    }
  }
});

其中，#dialog 是我们在 HTML 中定义的一个元素，用于承载对话框的内容。对话框的属性 modal 表示是否模态（即是否遮罩层）。

除了 modal 属性之外，我们还可以通过 buttons 属性来定义对话框的按钮。在上面的示例中，我们定义了一个名为 Ok 的按钮，并为其绑定了一个关闭对话框的函数。

自定义对话框的样式

我们可以通过自定义样式来改变对话框的外观和行为。下面是一个更复杂的对话框示例：

$("#dialog-form").dialog({
  autoOpen: false,
  height: 400,
  width: 350,
  modal: true,
  buttons: {
    "Create an account": function() {
      var bValid = true;
      // 验证表单数据
      if ( bValid ) {
        $( this ).dialog( "close" );
      }
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  },
  close: function() {
    // 对话框关闭时执行的函数
  }
});

在这个示例中，我们除了 modal 之外，还定义了一些其他的属性，包括：

• autoOpen：表示对话框是否自动弹出
• height 和 width：表示对话框的宽度和高度
• close：表示对话框关闭时需要执行的函数
• 其他样式属性：可以通过修改对话框内部元素的 CSS 样式来改变对话框的外观

示例1：使用对话框进行提示

下面的示例演示了如何使用 jQuery UI Dialog 来提示用户：

<button id="show-dialog">提示</button>

<div id="dialog-message" title="提示">
  <p>这是一个提示消息</p>
</div>

<script>
$("#dialog-message").dialog({
  modal: true,
  buttons: {
    Ok: function() {
      $( this ).dialog( "close" );
    }
  }
});

$("#show-dialog").click(function() {
  $("#dialog-message").dialog("open");
});
</script>

在这个示例中，我们定义了一个按钮和一个对话框。当按钮被点击时，通过调用 dialog() 方法打开对话框。

示例2：使用对话框进行表单验证

下面的示例演示了如何使用 jQuery UI Dialog 进行表单验证：

<button id="show-form-dialog">创建账户</button>

<div id="dialog-form" title="创建账户">
  <form>
    <fieldset>
      <label for="name">姓名</label>
      <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
      <label for="email">邮箱</label>
      <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
      <label for="password">密码</label>
      <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
    </fieldset>
  </form>
</div>

<script>
$("#dialog-form").dialog({
  autoOpen: false,
  height: 400,
  width: 350,
  modal: true,
  buttons: {
    "Create an account": function() {
      var bValid = true;
      // 验证表单数据
      if ( bValid ) {
        $( this ).dialog( "close" );
      }
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  }
});

$("#show-form-dialog").click(function() {
  $("#dialog-form").dialog("open");
});
</script>

在这个示例中，我们定义了一个按钮和一个表单对话框。当用户点击“创建账户”按钮时，通过调用 dialog() 方法打开对话框，使用表单进行数据输入。点击“Create an account”按钮时，对表单数据进行验证，并在验证通过后关闭对话框。

结论

jQuery UI Dialog 可以轻松地创建多种类型的对话框，包括警告、提醒、错误信息、确认等。它易于使用且可以高度定制，同时还支持多个按钮和表单验证。