jquery-ui 对话框_jQuery UI对话框插件

jquery-ui 对话框

We will discuss about the jQuery UI Dialog plugin in this post. The jQuery UI Dialog plugin is used for displaying information, which contains a dialog title and a content area. We can move, resize or close the dialog window.

在本文中，我们将讨论有关jQuery UI Dialog插件的信息。 jQuery UI对话框插件用于显示信息，其中包含对话框标题和内容区域。 我们可以移动，调整大小或关闭对话框窗口。

The jQuery UI provides different options, methods and events to customize the Dialog plugin. We will see these techniques in the following sections.

jQuery UI提供了不同的选项，方法和事件来定制Dialog插件。 我们将在以下各节中看到这些技术。

内容 (Contents)

• Dialog Plugin Options
  对话框插件选项
• Dialog Plugin Methods
  对话框插件方法
• Dialog Plugin Events
  对话框插件事件
• Dialog Plugin in Action
  对话框插件的作用

对话框插件选项 (Dialog Plugin Options)

In this section, we will discuss about different options available to customize the jQueryUI Dialog plugin. We have used many of these options in the Dialog Plugin in Action section.

在本节中，我们将讨论可用于自定义jQueryUI对话框插件的不同选项。 我们在“操作中的对话框插件”部分中使用了许多这些选项。

Options	Syntax	Drscription
appendTo	$( “.selector” ).dialog({ appendTo: “#someElem” });	This option is used to append an element to the dialog.
autoOpen	$( “.selector” ).dialog({ autoOpen: false });	Setting this to true makes the dialog box open on initialization.
buttons	$( “.selector” ).dialog({ buttons: [ { text: “Ok”, click: function() { $( this ).dialog( “close” ); } } ] });	This option is used to specify the button displayed on the dialog box.
closeOnEscape	$( “.selector” ).dialog({ closeOnEscape: false });	If it is set to true, the dialog box will close on pressing the escape key.
closeText	$( “.selector” ).dialog({ closeText: “hide” });	Text displayed for the close button
dialogClass	$( “.selector” ).dialog({ dialogClass: “alert” });	Used for additional theming of the dialog box.
draggable	$( “.selector” ).dialog({ draggable: false });	The dialog will be draggable by the title bar if it is set to true.
height	$( “.selector” ).dialog({ height: 400 });	Specifies the height of the dialog box.
hide	$( “.selector” ).dialog({ hide: { effect: “explode”, duration: 1000 } });	This option is used to animate the dialog box.
maxHeight	$( “.selector” ).dialog({ maxHeight: 600 });	Specifies the maximum height to which the dialog box can be resized.
maxWidth	$( “.selector” ).dialog({ maxWidth: 600 });	Specifies the maximum width to which the dialog box can be resized.
minHeight	$( “.selector” ).dialog({ minHeight: 200 });	Specifies the minimum height to which the dialog box can be resized.
minWidth	$( “.selector” ).dialog({ minWidth: 200 });	Specifies the minimum width to which the dialog box can be resized.
modal	$( “.selector” ).dialog({ modal: true });	Setting to true gives a modal behaviour.
position	$( “.selector” ).dialog({ position: { my: “left top”, at: “left bottom”, of: button } });	Specifies the position of the dialog box.
resizable	$( “.selector” ).dialog({ resizable: false });	Set to true makes the dialog box resizable.
show	$( “.selector” ).dialog({ show: { effect: “blind”, duration: 800 } });	Used to animate the dialog box.
title	$( “.selector” ).dialog({ title: “Dialog Title” });	Specifies the title of the dialog.
width	$( “.selector” ).dialog({ width: 500 });	Specifies the width of the dialog.

选件	句法	说明
appendTo	$（“ .selector”）.dialog（{appendTo：“ #someElem”}）;	此选项用于将元素附加到对话框。
自动打开	$（“ .selector”）.dialog（{autoOpen：false}）;	将此设置为true将使对话框在初始化时打开。
纽扣	$（“ .selector”）.dialog（{按钮：[{文本：“确定”，单击：function（）{$（this）.dialog（“ close”）;}}]}））;	此选项用于指定对话框上显示的按钮。
closeOnEscape	$（“ .selector”）.dialog（{closeOnEscape：false}）;	如果将其设置为true，则按退出键将关闭对话框。
closeText	$（“ .selector”）.dialog（{closeText：“ hide”}）;	显示关闭按钮的文字
dialogClass	$（“ .selector”）.dialog（{dialogClass：“ alert”}）;	用于对话框的其他主题。
可拖动的	$（“ .selector”）。dialog（{draggable：false}）;	如果对话框设置为true，则可以通过标题栏拖动该对话框。
高度	$（“ .selector”）.dialog（{height：400}）;	指定对话框的高度。
隐藏	$（“ .selector”）.dialog（{隐藏：{效果：“爆炸”，持续时间：1000}}）;	此选项用于设置对话框动画。
最大高度	$（“ .selector”）.dialog（{maxHeight：600}）;	指定对话框可以调整大小的最大高度。
maxWidth	$（“ .selector”）.dialog（{maxWidth：600}）;	指定对话框可以调整大小的最大宽度。
minHeight	$（“ .selector”）.dialog（{minHeight：200}）;	指定对话框可以调整大小的最小高度。
minWidth	$（“ .selector”）.dialog（{minWidth：200}）;	指定对话框可以调整大小的最小宽度。
情态的	$（“ .selector”）.dialog（{modal：true}）;	设置为true会给出模态行为。
位置	$（“ .selector”）.dialog（{位置：{我：“左上”，在：“左下”，来自：按钮}}）;	指定对话框的位置。
可调整大小	$（“ .selector”）.dialog（{resizable：false}）;	设置为true将使对话框可调整大小。
表演	$（“ .selector”）.dialog（{show：{effect：“ blind”，duration：800}}）;	用于制作对话框动画。
标题	$（“ .selector”）.dialog（{title：“对话框标题”}）;	指定对话框的标题。
宽度	$（“ .selector”）.dialog（{width：500}）;	指定对话框的宽度。

The above table briefly describes the options used to customize the Dialog plugin.

上表简要描述了用于自定义Dialog插件的选项。

对话框插件方法 (Dialog Plugin Methods)

In this section, we will look into the jQueryUI Dialog plugin methods and its usage. These methods are very useful when you deal with the Dialog plugin.

在本节中，我们将研究jQueryUI Dialog插件方法及其用法。 当您处理Dialog插件时，这些方法非常有用。

Methods	Usage	Description
close	$( “.selector” ).dialog( “close” );	Used to close the dialog.
destroy()	$( “.selector” ).dialog( “destroy” );	Used to remove the functionality completely.
instance()	$( “.selector” ).dialog( “instance” );	Used to get the dialog’s instance object.
isOpen()	$( “.selector” ).dialog( “isOpen” );	Check if the dialog is open.
moveToTop()	$( “.selector” ).dialog( “moveToTop” );	This method is used to move the dialog box to the top.
open()	$( “.selector” ).dialog( “open” );	This method is used to open the dialog.
option( optionName, value )	$( “.selector” ).dialog( “option”, “disabled”, true );	Used to the set the value of the dialog option associated with the optionName.
widget()	$( “.selector” ).dialog( “widget” );	This method will return a jQuery object of the dialog.

方法	用法	描述
关	$（“ .selector”）.dialog（“ close”）;	用于关闭对话框。
破坏（）	$（“ .selector”）.dialog（“ destroy”）;	用于完全删除功能。
instance（）	$（“ .selector”）.dialog（“ instance”）;	用于获取对话框的实例对象。
开了（）	$（“ .selector”）。dialog（“ isOpen”）;	检查对话框是否打开。
moveToTop（）	$（“ .selector”）.dialog（“ moveToTop”）;	此方法用于将对话框移到顶部。
打开（）	$（“ .selector”）.dialog（“ open”）;	此方法用于打开对话框。
option（optionName，value）	$（“ .selector”）.dialog（“ option”，“ disabled”，true）;	用于设置与optionName关联的对话框选项的值。
小部件（）	$（“ .selector”）.dialog（“ widget”）;	此方法将返回对话框的jQuery对象。

The above table briefly describes the methods used to customize the Dialog plugin.

上表简要介绍了用于自定义Dialog插件的方法。

对话框插件事件 (Dialog Plugin Events)

In this section, we will discuss about different events associated with jQueryUI Dialog plugin and its usage.

在本节中，我们将讨论与jQueryUI Dialog插件相关的不同事件及其用法。

Events	Usage	Description
beforeClose( event, ui )	$( “.selector” ).dialog({,beforeClose: function( event, ui ) {}});	This event is fire when the dialog is about to close.
close( event, ui )	$( “.selector” ).dialog({,close: function( event, ui ) {}});	Fired when the dialog is closed.
create( event, ui )	$( “.selector” ).dialog({,create: function( event, ui ) {}});	This event is fired when the dialog is created.
drag( event, ui )	$( “.selector” ).dialog({,drag: function( event, ui ) {}});	Fired when the dialog is being dragged
dragStart( event, ui )	$( “.selector” ).dialog({,dragStart: function( event, ui ) {}});	Fired when the user starts dragging the dialog.
dragStop( event, ui )	$( “.selector” ).dialog({,dragStop: function( event, ui ) {}});	Fired when the dragging is stopped.
focus( event, ui )	$( “.selector” ).dialog({,focus: function( event, ui ) {}});	Fired when the dialog is focused.
open( event, ui )	$( “.selector” ).dialog({,open: function( event, ui ) {}});	Fired when the dialog box is opened.
resize( event, ui )	$( “.selector” ).dialog({,resize: function( event, ui ) {}});	Fired when the user resize the dialog.
resizeStart( event, ui )	$( “.selector” ).dialog({,resizeStart: function( event, ui ) {}});	Fired when the user starts resizing the dialog.
resizeStop( event, ui )	$( “.selector” ).dialog({,resizeStop: function( event, ui ) {}});	Fired when the user stops resizing the dialog window.

大事记	用法	描述
beforeClose（event，ui）	$（“ .selector”）.dialog（{，beforeClose：function（event，ui）{}}）;	对话框即将关闭时，将触发此事件。
close（event，ui）	$（“ .selector”）.dialog（{，close：function（event，ui）{}}）;	对话框关闭时触发。
create（event，ui）	$（“ .selector”）.dialog（{，create：function（event，ui）{}}）;	创建对话框时会触发此事件。
拖动（事件，用户界面）	$（“ .selector”）.dialog（{，drag：function（event，ui）{}}）;	拖动对话框时触发
dragStart（event，ui）	$（“ .selector”）.dialog（{，dragStart：function（event，ui）{}}）;	当用户开始拖动对话框时触发。
dragStop（event，ui）	$（“ .selector”）。dialog（{，dragStop：function（event，ui）{}}）;	拖动停止时触发。
焦点（事件，用户界面）	$（“ .selector”）.dialog（{，focus：function（event，ui）{}}）;	对话框聚焦时触发。
打开（事件，用户界面）	$（“ .selector”）.dialog（{，open：function（event，ui）{}}）;	对话框打开时触发。
调整大小（事件，UI）	$（“ .selector”）.dialog（{，resize：function（event，ui）{}}）;	用户调整对话框大小时触发。
resizeStart（event，ui）	$（“ .selector”）.dialog（{，resizeStart：function（event，ui）{}}）;	当用户开始调整对话框大小时触发。
resizeStop（event，ui）	$（“ .selector”）.dialog（{，resizeStop：function（event，ui）{}}）;	当用户停止调整对话框窗口大小时触发。

The above table briefly describes the events associated with the Dialog plugin.

上表简要描述了与Dialog插件关联的事件。

对话框插件的作用 (Dialog Plugin in Action)

In this section, we will try different examples to explore the uses of jQueryUI Dialog plugin. You will get a basic idea about the dialog plugin customization with available options, methods and events.

在本节中，我们将尝试不同的示例来探索jQueryUI Dialog插件的用法。 您将获得有关对话框插件自定义的基本思想，以及可用的选项，方法和事件。

默认功能 (Default Functionality)

The following example demonstrates the default functionality of jQuery UI Dialog plugin

以下示例演示了jQuery UI 对话框插件的默认功能

dialog-default.html

dialog-default.html

<!doctype html>
<html>
<head>
  <title>jQuery UI Dialog - Default Functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
         $(function() {
            $( "#dialog" ).dialog({
               autoOpen: false,  
            });
            $( "#openbtn" ).click(function() {
               $( "#dialog" ).dialog( "open" );
            });
         });
   </script>

   </head>
   <body> 
      <div style="font-size: 12px" id="dialog" title="Dialog Demo"> 
         <p>Demonstrates the use of autoOpen option and open() method in the jQueryUI dialog plugin.</p>
      </div>
      <button id="openbtn">Open Dialog</button>
   </body>
</html>

You will see the following output on the browser.

您将在浏览器中看到以下输出。

演示地址

使用autoOpen选项和open（） (Use of autoOpen option and open())

The following example demonstrates the use of autOpen option and open() method in jQuery UI Dialog plugin. In this example, we set the autOpen option to false. The dialog box opens only when you click on the button.

以下示例演示了jQuery UI对话框插件中autOpen选项和open()方法的用法。 在此示例中，我们将autOpen选项设置为false。 仅当您单击按钮时，对话框才会打开。

dialog-open.html

dialog-open.html

<!doctype html>
<html>
<head>
  <title>jQuery UI Dialog</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
         $(function() {
            $( "#dialog" ).dialog({
               autoOpen: false,  
            });
            $( "#openbtn" ).click(function() {
               $( "#dialog" ).dialog( "open" );
            });
         });
      </script>
   </head>
   <body> 
      <div style="font-size: 12px" id="dialog" title="Dialog Demo"> 
         <p>Demonstrates the use of autoOpen option and open() method in the jQueryUI dialog plugin.</p>
      </div>
      <button id="openbtn">Open Dialog</button>
   </body>
</html>

You will see a dialog box with title “Dialog Demo”, when you click on the button.

当您单击按钮时，将看到一个标题为“对话框演示”的对话框。

演示地址

使用“隐藏和显示”选项为对话框设置动画 (Use of hide and show option to animate the Dialog box)

The following example demonstrates how to animate the dialog box with show and hide options.

下面的示例演示如何使用show和hide选项为对话框设置动画。

dialog-animate.html

dialog-animate.html

<!doctype html>
<html>
<head>
  <title>jQuery UI Dialog</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>  <script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "slideDown",
        duration: 500
      },
      hide: {
        effect: "explode",
        duration: 500
      }
    });
 
    $( "#openbtn" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
</script>
</head>
<body>
 
<div style="font-size: 12px;"id="dialog" title="Animate Dialog Demo">
  <p>This example demonstrates the animation of dialog box using hide and show options. The dialog box can be moved, resized or closed. </p>
</div>
    <button id="openbtn">Open Dialog</button>
</body>
</html>

You will see the following output on the browser.

您将在浏览器中看到以下输出。

演示地址

That’s all for now and you will see more jQuery plugins in the coming posts.

到此为止，您将在接下来的文章中看到更多的jQuery插件。

翻译自: https://www.journaldev.com/5832/jquery-ui-dialog-plugin

jquery-ui 对话框