jQuery UI对话框插件
时间：2020-02-23 14:46:16 来源:igfitidea点击:
在本文中，我们将讨论有关jQuery UI Dialog插件的信息。
jQuery UI对话框插件用于显示信息，其中包含对话框标题和内容区域。
我们可以移动，调整大小或者关闭对话框窗口。
jQuery UI提供了不同的选项，方法和事件来定制Dialog插件。
我们将在以下各节中看到这些技术。
对话框插件选项
在本节中，我们将讨论可用于自定义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. |
上表简要介绍了用于自定义Dialog插件的选项。
对话框插件方法
在本节中，我们将研究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. |
上表简要描述了用于自定义Dialog插件的方法。
对话框插件事件
在本节中，我们将讨论与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. |
上表简要描述了与Dialog插件关联的事件。
对话框插件的作用
在本节中，我们将尝试不同的示例来探索jQueryUI Dialog插件的用法。
您将获得有关对话框插件自定义的基本思想，以及可用的选项，方法和事件。
默认功能
以下示例演示了jQuery UI对话框插件的默认功能
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>
您将在浏览器中看到以下输出。
使用autoOpen选项和open()
以下示例演示了jQuery UI对话框插件中的" autOpen"选项和" open()"方法的使用。
在这个例子中，我们将autOpen选项设置为false。
仅当您单击按钮时，对话框才会打开。
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>
当您单击按钮时，将看到一个标题为"对话框演示"的对话框。
使用"隐藏和显示"选项为对话框设置动画
以下示例演示了如何使用show和hide选项为对话框设置动画。
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>
