📌  相关文章
📜  jQuery UI 对话框小部件完整参考(1)

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

jQuery UI 对话框小部件完整参考

简介

jQuery UI 对话框小部件是一个广泛使用的 JavaScript 库，可以让你快速创建漂亮、可交互的对话框。它是 jQuery UI 库的一部分，与 jQuery 库一起使用。

使用方法

使用 jQuery UI 对话框小部件非常简单。首先，你需要在页面上引入 jQuery 库和 jQuery UI 库。然后，你需要创建一个包含内容的 DOM 元素，这个元素将会显示在对话框中。最后，你需要调用 jQuery UI 对话框小部件的 dialog() 方法并将创建的元素传递给它。

以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI 对话框小部件示例</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>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be 
  moved, resized and closed with the 'x' icon.</p>
</div>

<script>
$( "#dialog" ).dialog();
</script>

</body>
</html>
选项

jQuery UI 对话框小部件有许多可用选项，可以更改小部件的行为和外观。以下是一些常用选项和描述：

  • autoOpen: 布尔值，设置对话框是否在页面加载时自动打开。默认为 true。
  • buttons: 对话框底部的按钮。一个对象数组，对象包括 text 和 click 属性。默认为 [ { text: "Ok", click: function(){ $( this ).dialog( "close" ); } } ]。
  • closeOnEscape: 布尔值，设置是否启用 ESC 键关闭对话框。默认为 true。
  • dialogClass: 一个字符串，包含将添加到对话框类的自定义类名。默认为 ""。
  • draggable: 布尔值，设置对话框是否可拖动。默认为 true。
  • height: 用于设置对话框的高度。默认为 "auto"。
  • modal: 布尔值，设置对话框是否为模态（阻止用户与页面上的其他元素交互）。默认为 false。
  • resizable: 布尔值，设置对话框是否可调整大小。默认为 true。
  • title: 对话框标题。默认为 ""。
  • width: 用于设置对话框的宽度。默认为 300。

以下是一个更复杂的示例，显示了如何使用选项并添加一个 "Cancel" 按钮：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI 对话框小部件示例</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>
</head>
<body>

<div id="dialog" title="Custom dialog" style="display:none;">
  <p>This is a custom dialog. You can customize it by using the options below.</p>
  <form>
    <fieldset>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
      <br>
      <label for="email">Email</label>
      <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
    </fieldset>
  </form>
</div>

<script>
$( "#dialog" ).dialog({
  autoOpen: false,
  width: 400,
  buttons: [
    {
      text: "Ok",
      click: function() {
        $( this ).dialog( "close" );
      }
    },
    {
      text: "Cancel",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

$( "#opener" ).on( "click", function() {
  $( "#dialog" ).dialog( "open" );
});
</script>

<button id="opener">Open the dialog</button>

</body>
</html>
方法

jQuery UI 对话框小部件有多种方法，可用于与小部件进行交互。以下是一些常用方法和描述：

  • dialog("open"): 打开对话框。
  • dialog("close"): 关闭对话框。
  • dialog("option", optionName, [value]): 设置或获取特定选项的值。
  • dialog("widget"): 获取对话框小部件的 jQuery 对象。
  • dialog("destroy"): 销毁对话框小部件。

以下是一个示例，演示在页面加载时打开对话框并在点击 "Open" 按钮时关闭它：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI 对话框小部件示例</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>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be 
  moved, resized and closed with the 'x' icon.</p>
</div>

<script>
$( "#dialog" ).dialog({
  autoOpen: false
});

$( "#opener" ).on( "click", function() {
  $( "#dialog" ).dialog( "open" );
});

$( "#closer" ).on( "click", function() {
  $( "#dialog" ).dialog( "close" );
});
</script>

<button id="opener">Open the dialog</button>
<button id="closer">Close the dialog</button>

</body>
</html>
事件

jQuery UI 对话框小部件有多个事件，可用于在小部件的生命周期中执行自定义代码。以下是一些常用事件和描述：

  • beforeClose: 在对话框关闭之前触发。
  • close: 在对话框关闭之后触发。
  • create: 在对话框小部件创建之后触发。
  • drag: 在对话框拖动期间触发。
  • dragStart: 在对话框开始拖动时触发。
  • dragStop: 在对话框停止拖动时触发。
  • focus: 在对话框被焦点时触发。
  • open: 在对话框打开之后触发。
  • resize: 在对话框调整大小期间触发。
  • resizeStart: 在对话框开始调整大小时触发。
  • resizeStop: 在对话框停止调整大小时触发。

以下是一个示例，演示如何使用 close 事件在对话框关闭时执行代码：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI 对话框小部件示例</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>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be 
  moved, resized and closed with the 'x' icon.</p>
</div>

<script>
$( "#dialog" ).dialog({
  autoOpen: false,
  close: function() {
    alert( "The dialog has been closed." );
  }
});

$( "#opener" ).on( "click", function() {
  $( "#dialog" ).dialog( "open" );
});
</script>

<button id="opener">Open the dialog</button>

</body>
</html>
总结

jQuery UI 对话框小部件是一个非常强大、易于使用的 JavaScript 库，用于创建漂亮、可交互的对话框。它有许多选项、方法和事件可供使用，可以实现大多数需求。如果你需要在你的网站或应用程序中添加对话框，jQuery UI 对话框小部件是一个不错的选择！