jQuery UI对话框 


jQuery UI对话框

该对话框用于在HTML页面上很好地呈现信息。 jQuery UI对话框方法用于创建一个基本的对话框窗口,该窗口位于视口中并受页面内容的保护。它具有标题栏和内容区域,并且默认情况下可以使用“ x”图标进行移动,调整大小和关闭。

句法:

您可以通过两种形式使用对话()方法:

$(selector, context).dialog (options) Method
$(selector, context).dialog ("action", [params]) Method

第一种方法

$(selector, context).dialog (options) Method

dialog(options)方法指定您可以使用对话框形式的HTML元素。在这里,options参数是一个对象,用于指定该窗口的外观和行为。

句法:

$(selector, context).dialog(options);

您可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项,则必须使用逗号将它们分开,如下所示:

$(selector, context).dialog({option1: value1, option2: value2..... });

以下是可与该方法一起使用的不同选项的列表:

Option Description
appendto If you set this option to false, it will prevent the UI-draggable class from being added in the list of selected DOM elements. By default its value is true.
autoopen If you set this option to true, the dialog box is opened upon creation. when false, the dialog box will be opened upon a call to dialog(‘open’). By default its value is true.
buttons This option adds buttons in the dialog box. These are listed as objects, and each property is the text on the button. The value is a callback function called when the user clicks the button. By default its value is {}.
closeonescape Unless you set this option to false, the dialog box will be closed when the user presses the escape key while the dialog box has focus. By default its value is true.
closetext This option contains text to replace the default of close for the close button. by default its value is “close”.
dialogclass If you set this option to false, it will prevent the UI-draggable class from being added in the list of selected dom elements. By default its value is “”.
draggable you set this option to false, dialog box will be draggable by clicking and dragging the title bar. By default its value is true.
height This option sets the height of the dialog box. By default its value is “auto”.
hide This option is used to set the effect to be used when the dialog box is closed. By default its value is null.
maxheight This option sets maximum height, in pixels, to which the dialog box can be resized. By default its value is false.
maxwidth This option sets the maximum width to which the dialog can be resized, in pixels. By default its value is false.
minheight This option is the minimum height, in pixels, to which the dialog box can be resized. By default its value is 150.
minwidth This option is the minimum width, in pixels, to which the dialog box can be resized. By default its value is 150.
modal If this option is set to true, the dialog will have modal behavior; other items on the page will be disabled, i.e., cannot be interacted with. modal dialogs create an overlay below the dialog but above other page elements. By default its value is false.
position This option specifies the initial position of the dialog box. can be one of the predefined positions: center (the default), left, right, top, or bottom. can also be a 2-element array with the left and top values (in pixels) as [left,top], or text positions such as [‘right’,’top’]. by default its value is { my: “center”, at: “center”, of: window }.
resizeable This option unless set to false, the dialog box is resizable in all directions. by default its value is true.
show This option is an effect to be used when the dialog box is being opened. by default its value is null.
title This option specifies the text to appear in the title bar of the dialog box. By default its value is null.
width This option specifies the width of the dialog box in pixels. By default its value is 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="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://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="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://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="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://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]) Method:

对话框(操作,参数)方法用于在对话框上执行操作,例如关闭对话框。该操作在第一个参数中指定为字符串,并且可以选择使用一个或多个参数(基于给定操作)一个或多个参数。

句法:

$(selector, context).dialog ("action", [params]);

以下是与此方法一起使用的操作的列表:

Action Description
close() This action is used to close the dialog box. This method does not accept any arguments.
destroy() This action is used to removes the dialog box completely. This will return the element back to its pre-init state. This method does not accept any arguments.
isOpen() This action is used to check if the dialog box is open. This method does not accept any arguments.
moveToTop() This action is used to allocate position to the corresponding dialog boxes to the foreground (on top of the others). This method does not accept any arguments.
open() This action is used to opens the dialog box. This method does not accept any arguments.
option(optionName) this action gets the value currently associated with the specified optionName. where optionName is the name of the option to get.
option() This action gets an object containing key/value pairs representing the current dialog options hash. This method does not accept any arguments.
option(optionName,value) This action sets the value of the dialog option associated with the specified optionName.
option( options) This action sets one or more options for the dialog.
widget() This action is used to return the dialog box?s widget element; the element annotated with the ui-dialog class name. This method does not accept any arguments.

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="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://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>
0



error: 内容受到保护 !!