jQuery UI 对话框 widget() 方法(1)

📌 相关文章

📜 jQuery UI 对话框 widget() 方法(1)

📅 最后修改于: 2023-12-03 15:16:45.609000 🧑 作者: Mango

jQuery UI 对话框 widget() 方法

jQuery UI 是一个基于 jQuery 的 UI 组件库，它允许您快速创建可重用的 UI 组件。其中之一就是对话框（Dialog）组件。jQuery UI 对话框 widget() 方法用于初始化和配置对话框组件。

语法

$(selector).dialog(options)

参数说明

参数 | 描述 ---|--- selector | 用于选取要初始化为对话框的元素。必须是一个有效的选择器字符串、jQuery 对象或 DOM 元素。 options | 一个包含属性和事件的对象，用于配置对话框组件。

以下列出 options 对象中的一些常用属性：

属性 | 描述 ---|--- autoOpen | 布尔值，表示对话框是否默认打开。默认值：false。 width | 对话框的宽度。默认值：auto。 height | 对话框的高度。默认值：auto。 title | 对话框的标题。默认值：空字符串。 modal | 布尔值，表示对话框是否是模态（Modal）对话框。模态对话框会阻止用户与页面交互。默认值：false。 buttons | 一个包含按钮文本和回调函数的数组。默认值：空数组。

以下列出 options 对象中的一些常用事件：

事件 | 描述 ---|--- beforeClose | 对话框关闭之前触发。如果回调函数返回 false，则会阻止对话框关闭。 close | 对话框关闭时触发。

实例

以下代码演示如何使用 dialog() 方法创建一个简单的对话框：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
  $("#dialog").dialog({
    autoOpen: false,
    width: 400,
    buttons: {
      "OK": function() {
        $(this).dialog("close");
      },
      "Cancel": function() {
        $(this).dialog("close");
      }
    }
  });
  $("#btnOpen").click(function() {
    $("#dialog").dialog("open");
  });
});
</script>
</head>
<body>
<button id="btnOpen">Open Dialog</button>
<div id="dialog" title="Basic Dialog">
  <p>This is a basic dialog.</p>
</div>
</body>
</html>

在上面的代码中，我们首先引入了 jQuery UI 样式表和脚本。然后定义了一个按钮和一个 div 元素。在按钮的 click 事件中，我们调用了 dialog() 方法，将 div 元素初始化为对话框，并设置了 autoOpen 和 buttons 属性。最后在对话框中添加了一段文本。

点击按钮后，对话框会弹出，并显示 OK 和 Cancel 两个按钮。单击这些按钮中的任何一个都会关闭对话框。

总结

jQuery UI 对话框 widget() 方法是一个非常方便的工具，可以帮助您快速创建 UI 组件。通过设置选项和事件，您可以轻松地自定义对话框的样式和行为。如果您需要创建定制的 UI 组件，jQuery UI 组件库是一个值得尝试的工具。