jQuery UI Dialog

jQuery UI Dialog

Dialog用于在HTML页面上很好地呈现信息。 jQuery UI Dialog方法用于创建一个基本的对话框窗口,该窗口位于视口中并受页面内容的保护。它具有标题栏和内容区域,并且默认情况下可以使用" x"图标进行移动,调整大小和关闭。
语法:
您可以以两种形式使用对话框()方法:
 
$(selector, context).dialog (options)
 $(selector, context).dialog ("action", [params])

第一种方法

 
$(selector, context).dialog (options)
dialog(options)方法指定您可以使用对话框形式的HTML元素。在这里,options参数是一个对象,用于指定该窗口的外观和行为。
语法:
 $(selector, context).dialog(options);
您可以一次使用JavaScript对象使用一个或多个选项。如果有多个选项,则必须使用逗号将它们分开,如下所示:
 $(selector, context).dialog({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表:
选项 说明
appendto 如果将此选项设置为false,将防止将UI可拖动类添加到所选DOM元素列表中。默认情况下,其值为true。
autoopen 如果将此选项设置为true,则在创建时将打开对话框。如果为false,则在调用dialog('open')时将打开对话框。默认情况下,其值为true。
buttons 此选项在对话框中添加按钮。这些列为对象,每个属性都是按钮上的文本。该值是用户单击按钮时调用的回调函数。默认情况下,其值为{}。
closeonescape 除非您将此选项设置为false,否则当对话框具有焦点时用户按退出键时,该对话框将关闭。默认情况下,其值为true。
closetext 此选项包含用于替换关闭按钮的默认关闭文本的文本。默认情况下,其值为"关闭"。
dialogclass 如果将此选项设置为false,将防止将UI拖动类添加到所选dom元素列表中。默认情况下,其值为""。
draggable 将此选项设置为false,通过单击并拖动标题栏将可拖动对话框。默认情况下,其值为true。
height 此选项设置对话框的高度。默认情况下,其值为"自动"。
hide 此选项用于设置关闭对话框时要使用的效果。默认情况下,其值为null。
maxheight 此选项设置对话框的最大高度(以像素为单位)。默认情况下,其值为false。
maxwidth 此选项设置对话框可调整大小的最大宽度(以像素为单位)。默认情况下,其值为false。
minheight 此选项是对话框可以调整大小的最小高度(以像素为单位)。默认情况下,其值为150。
minwidth 此选项是对话框可调整大小的最小宽度(以像素为单位)。默认情况下,其值为150。
modal 如果此选项设置为true,则对话框将具有模式行为;页面上的其他项目将被禁用,即无法与之交互。模式对话框在对话框下方但在其他页面元素上方创建一个叠加层。默认情况下,其值为false。
position 此选项指定对话框的初始位置。可以是预定义位置之一: 居中(默认),左,右,上或下。也可以是2元素数组,其左值和顶部值(以像素为单位)为[left,top],或文本位置,例如['right','top']。默认情况下,其值为{my: " center",位于: " center",of: window}。
resizeable 此选项除非设置为false,否则对话框在各个方向上均可调整大小。默认情况下,其值为true。
show 此选项是打开对话框时要使用的效果。默认情况下,其值为null。
title 此选项指定要显示在对话框标题栏中的文本。默认情况下,其值为null。
width 此选项指定对话框的宽度(以像素为单位)。默认情况下,其值为300。

jQuery UI对话框示例1

让我们举一个简单的示例来演示对话框功能的用法,该功能不将任何参数传递给dialog()方法。
 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1").dialog({
               autoOpen: false,
            });
            $( "#opener").click(function() {
               $( "#dialog-1").dialog( "open");
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML -->
      <div id="dialog-1" title="Movie Title:Psycho (1960)">"A boy's best friend is his mother." </div>
      <button id="opener">Open Dialog</button>
   </body>
</html>

jQuery UI对话框示例2

按钮,标题和位置的使用:
让我们以一个示例来演示对话框小部件中三个选项按钮,标题和位置的用法。
 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background:lightgreen;
            border: 1px solid #b9cd6d;
            color: black;
            font-weight: bold;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-2").dialog({
               autoOpen: false,
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
               title: "Movie Title:Sholey",
               position: {
                  my: "left center",
                  at: "left center"
               }
            });
            $( "#opener-2").click(function() {
               $( "#dialog-2").dialog( "open");
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML -->
      <div id="dialog-2" title="Dialog Title goes here...">Are O Sambha:Kitna inaam rakhi hai re sarkar hum par.</div>
      <button id="opener-2">Open Dialog</button>
   </body>
</html>

jQueryUI对话框示例3

隐藏,显示和高度的使用:
让我们以一个示例来演示用法这些选项中的隐藏,显示和高度。
 
<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background: lightyellow;
            border: 1px solid #b9cd6d;
            color: black;
            font-weight: bold;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-3").dialog({
               autoOpen: false,
               hide: "slide",
               show : "slide",
               height: 200
            });
            $( "#opener-3").click(function() {
               $( "#dialog-3").dialog( "open");
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML -->
      <div id="dialog-3" title="This is a title.">This is a dialog.</div>
      <button id="opener-3">Open Dialog</button>
   </body>
</html>

第二种方法

 $(selector, context).dialog ("action", [params]):
dialog ("action", [params])方法用于在对话框上执行操作,例如关闭对话框。该操作在第一个参数中指定为字符串,并且可以选择使用一个或多个参数(基于给定操作)一个或多个参数。
语法:
 $(selector, context).dialog ("action", [params]);
以下是与此方法一起使用的操作的列表:
动作 说明
close() 此操作用于关闭对话框。此方法不接受任何参数。
destroy() 此操作用于完全删除对话框。这将使元素返回其初始状态。此方法不接受任何参数。
isOpen() 此操作用于检查对话框是否打开。此方法不接受任何参数。
moveToTop() 此操作用于将位置分配给相应对话框的前景(在其他对话框的顶部)。此方法不接受任何参数。
open() 此操作用于打开对话框。此方法不接受任何参数。
option(optionName) 此操作获取当前与指定的optionName关联的值。其中optionName是要获取的选项的名称。
option() 此操作获取一个对象,该对象包含表示当前对话框选项哈希的键/值对。此方法不接受任何参数。
option(optionName,value) 此操作设置与指定的optionName关联的对话框选项的值。
option(选项) 此操作为对话框设置一个或多个选项。
widget() 此动作用于返回对话框的小部件元素;用ui-dialog类名注释的元素。此方法不接受任何参数。

jQuery UI对话框示例4

让我们以一个简单的示例来演示isOpen(),open()和close()方法的用法。
 
<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      <!-- Javascript -->
      <script type="text/javascript">
         $(function(){
            $("#toggle").click(function() {

               ($("#dialog-5").dialog("isOpen") == false) ? $("#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
            });
            $("#dialog-5").dialog({autoOpen: false});
         });
      </script>
   </head>
   <body>
      <button id="toggle">Toggle dialog!</button>
      <div id="dialog-5" title="Dialog Title!">
         Click on the Toggle button to open and cose this dialog box.
      </div>
   </body>
</html>