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

📌 相关文章

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

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

jQuery UI 对话框 open() 方法

简介

open() 方法是 jQuery UI 中对话框组件（Dialog Widget）中的一个方法，通过该方法可以在页面上打开一个对话框窗口。该方法用于对已初始化的对话框进行打开或显示操作，以便用户与对话框进行交互。

语法

$(selector).dialog("open");

参数

无需传入参数。

返回值

无返回值。

示例

以下示例演示了如何使用 open() 方法打开一个对话框窗口：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI 对话框 open() 方法示例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $(function() {
    // 初始化对话框
    $( "#dialog" ).dialog({
      autoOpen: false,
    });
 
    // 绑定按钮点击事件
    $( "#btnShowDialog" ).click(function() {
      // 打开对话框
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>
</head>
<body>
 
<button id="btnShowDialog">打开对话框</button>
 
<div id="dialog" title="对话框窗口">
  <p>这是一个对话框示例。</p>
</div>
 
</body>
</html>

在上述示例中，首先定义了一个按钮元素<button>和一个<div>元素作为对话框内容，并在页面 ready 事件中初始化了对话框组件。然后在按钮的 click 事件中，调用 open() 方法打开该对话框。

注意事项

在使用 open() 方法打开对话框之前，必须先初始化对话框组件，否则会报错。使用 $(selector).dialog() 方法进行初始化，并通过配置选项进行一些自定义设置，例如指定对话框内容、选择器或标题的样式。

此外，还可以通过在 open 事件中自定义对话框的样式或行为。

下面是一个更完整的示例：

$(function () {
  // 初始化对话框组件
  $("#my-dialog").dialog({
    autoOpen: false,
    resizable: false,
    modal: true,
    width: 480,
    title: "对话框标题",
    buttons: [
      {
        text: "确定",
        click: function () {
          /* do something when clicking "OK" button */
          $(this).dialog("close");
        }
      },
      {
        text: "取消",
        click: function () {
          $(this).dialog("close");
        }
      },
    ],
    open: function() {
      /* do something when opening the dialog */
    },
    close: function() {
      /* do something when closing the dialog */
    }
  });

  // 绑定事件
  $("#open-dialog").on("click", function () {
    $("#my-dialog").dialog("open");
  });
});

在这个示例中，我们给对话框指定了一些配置选项，并定义了 open 和 close 事件，分别在打开和关闭对话框时触发。同时，我们定义了两个按钮，分别为“确定”和“取消”。当用户单击这些按钮时，会分别触发相应的回调函数并关闭对话框。最后，我们绑定了一个按钮 #open-dialog 的 click 事件，通过调用$("#my-dialog").dialog("open"); 来打开对话框。

请注意，$("#my-dialog") 中 "my-dialog" 是一个<div>元素的 ID 属性值，表示要绑定对话框组件的目标元素，也即是对话框的容器元素。