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({ m