Dialog dialog box functionality in the JQuery UI Library uses full resolution _jquery

Source: Internet
Author: User

dialog box (dialog) is a very important feature of the jquery UI. It completely replaces JavaScript.
Alert (), prompt () and other methods, also avoids the new window or the complex redundancy of the page.

A Open Multiple Dialog
This can be done as long as you set a different ID.

$ (' #x '). dialog (); 
$ (' #y '). dialog (); 

Two Modify Dialog Style
in the Pop-up Dialog dialog box, open Firebug in Firefox or right-click-> to view
Elements. You can look at the dialog style and modify the background of the dialog title.

Do not need to modify the UI CSS, directly replace with Style.css 
. Ui-widget-header { 
 
  Background:url (. /img/xxx.png); 
 
} 

Three Properties of the dialog () method
there are two forms of dialog box methods: 1.dialog (Options), and options are in the form of object-key-value pairs
argument, each key-value pair represents an option; 2.dialog (' action ', param), action is operation on
The string of the Word box method, param is an option for options.

Dialog appearance options
Property
Default value/Type
Description
Title
No/String
The title of the dialog box, which can be set directly on the DOM element
Buttons
None/Object
Adds a button to the dialog, using the object-key-value alignment. Key is a button
Name, and the value is the callback function that is invoked after the user clicks

$ (' #reg '). Dialog ({ 
 
 title: ' Register ', 
 
 buttons: { 
 
   ' button ': function () {} 
 
 } 
 
); 

Dialog page position options
Property
Default value/Type
Description
Position
center/string
Sets the coordinate position of a dialog window, which defaults to center.
Other setting values are: Left top, top right, bottom left,
Right bottom (Four Corners), top, bottom (tops or bottoms)
, center width, left or right, height
Center), Center (default)

$ (' #reg '). dialog ({ 
 
  position: ' Left Top ' 
 
}); 

Dialog size Option
Property
Default value/Type
Description
Width
300/value
The width of the dialog box. The default is 300, and the unit is pixel.
Height
auto/value
The height of the dialog box. The default is auto and the unit is pixel.
MinWidth
150/value
The minimum width of the dialog box. The default is 150, in pixels.
MinHeight
150/value
The minimum height of the dialog box. The default is 150, in pixels.
MaxWidth
auto/value
The maximum width of the dialog box. Default auto, the unit is pixel.
MaxHeight
auto/value
The maximum height of the dialog box. Default auto, the unit is pixel.

$ (' #reg '). Dialog ({ 
 
  height:500, 
 
  width:500, 
 
  minwidth:300, 
 
  minheight:300, 
 
  maxwidth:800 
 
  , maxheight:600 
 
}); 

Dialog Visual options
Property
Default value/Type
Description
Show
false/Boolean value
When you display a dialog box, the fade effect is the default.
Hide
False Boolean value
When you close the dialog box, the fade effect is used by default.

$ (' #reg '). Dialog ({ 
 
  show:true, 
 
  hide:true 
 
}); 

Note: When you set true, the default is fade, and if you want to use a different effect, you can use the string parameters in the table below.

Show and hide optional effects
Effect Name
Description
Blind
dialog box appears or disappears from the top
Bounce
dialog box shows or disappears intermittently, vertical motion
Clip
dialog box to show or disappear vertically from the center
Slide
The dialog box appears or disappears from the left
Drop
dialog box appears or disappears from the left, with transparency changes
Fold
The dialog box appears or disappears from the top left corner
Highlight
dialog box shows or disappears with transparency and background color changes
Puff
The dialog box is scaled from the center. "Shrink" when displayed, "grow" when it disappears
Scale
The dialog box is scaled from the center. "Grow" when displayed, "shrink" when it disappears
Pulsate
dialog box to show or disappear in blinking form

$ (' #reg '). Dialog ({Show 
 
  : ' Blind ', 
 
  Hide: ' Blind ' 
 
}); 

dialog Behavior Options
Property
Default value/Type
Description
AutoOpen
true/Boolean value
The default is true, and the dialog box opens when the dialog () method is invoked.
If False, the dialog box is not visible, but the dialog box is created to
To be visible by dialog (' Open ').
Draggable
true/Boolean value
The default is true, you can move the dialog box and false cannot be moved.
Resizable
true/Boolean value
The default is true, you can resize the dialog box, false cannot be adjusted
Modal
false/Boolean value
The default is False, the dialog box is operable, and the true dialog box masks
A layer of gray yarn, unable to operate.
Closetext
No/String
Set the title text of the Close button

$ (' #reg '). Dialog ({ 
 
  autoopen:false, 
 
  draggable:false, 
 
  resizable:false, 
 
  modal:true, 
 
  closetext : ' Close ' 
 
}); 

Four Events for the dialog () method
In addition to property settings, the dialog () method also provides a large number of events. These events can give a variety of different states
Provides a callback function when the The This value in these callback functions equals the Div object of the dialog box content, not the entire dialog box
The Div.

dialog Event Options
Event name
Description
Focus
When the dialog box is activated (first display and click on it each time)
Call the focus method, which has two parameters (event, UI). In this event
The UI parameter is empty.
Create
The Create method is called when the dialog box is created, which has two parameters
Number (event, UI). The UI parameter in this event is empty.
Open
When the dialog box is displayed (first display or call dialog (' Open ') method)
Calls the Open method, which has two parameters (event, UI). This event
The UI parameter in is empty.
BeforeClose
When the dialog box is about to close (when you click the Close button or call
dialog (' Close ') method), the BeforeClose method is invoked. If the letter
Number returns False, the dialog box will not be closed. The closed dialog box can be
Re-open With dialog (' Open '). The method has two parameters (event, UI).
The UI parameter in this event is empty.
Close
When the dialog box is about to close (when you click the Close button or call
dialog (' Close ') method, the Close method is called. The closed dialog box can be
To reopen with dialog (' Open '). The method has two parameters (event,
UI). The UI parameter in this event is empty.
Drag
When a dialog box is moved, the drag method is invoked each time a move is moved. The
Method has two parameters. The method has two parameters (event, UI). This event
The UI in has two Property objects:
1.position, get the currently moving coordinates, there are two child properties: top and
Left
2.offset, get the currently moving coordinates, with two child properties: top and left.
DragStart
When you start to move the dialog box, the DragStart method is invoked. The method has
Two parameters (event, UI). The UI in this event has two Property objects:
1.position, get the currently moving coordinates, there are two child properties: top and
Left
2.offset, get the currently moving coordinates, with two child properties: top and left.
DragStop
When you start to move the dialog box, the DragStop method is invoked. The method has
Two parameters (event, UI). The UI in this event has two Property objects:
1.position, get the currently moving coordinates, there are two child properties: top and
Left
2.offset, get the currently moving coordinates, with two child properties: top and left.
Resize
method. The method has two parameters (event, UI). The UI in this event has four
Property objects:
1.size, gets the size of the dialog box, has two child properties: Width and
height.
2.position to get the coordinates of the dialog box with two child properties: top and left.
3.originalSize to get the original size of the dialog box with two child properties:
width and height.
4.originalPosition to get the original coordinates of the dialog box, with two sub
sex: Top and left.
resizestart
two parameters (event, UI). The UI in this event has four Property objects:
1.size, gets the size of the dialog box, has two child properties: Width and
height.
2.position to get the coordinates of the dialog box with two child properties: top and left.
3.originalSize to get the original size of the dialog box with two child properties:
width and height.
4.originalPosition to get the original coordinates of the dialog box, with two sub
sex: Top and left.
Resizestop
When you end the drag dialog, the Resizestart method is invoked. The method has
Two parameters (event, UI). The UI in this event has four property objects:
1.size, to get the size of the dialog box, there are two child properties: Width and
Height
2.position, get the coordinates of the dialog box, with two attributes: Top and left.
3.originalSize, to get the original size of the dialog box, there are two child properties:
Width and height.
4.originalPosition, get the original coordinates of the dialog box, with two sub genera
Sex: Top and left.

When the dialog box gets the focus $ (' #reg '). Dialog ({focus:function (E, UI) {alert (' Get Focus '); 
 
} 
 
}); 
 
  When the dialog box is created $ (' #reg '). Dialog ({create:function (E, UI) {alert (' Create dialog box '); 
 
} 
 
}); When the $ (' #reg ') is about to be closed. Dialog ({beforeclose:function (E, UI) {alert (' What to do before closing!) 
 
   '); 
 
  return flag; 
 
} 
 
}); When closing the dialog box $ (' #reg '). Dialog ({close:function (E, UI) {alert (' Off! 
 
  '); 
 
} 
 
}); The dialog box moves $ (' #reg '). Dialog ({drag:function (E, UI) {alert (' top: ' + ui.position.top + ' \ n ' + ' left 
 
  : ' + ui.position.left); 
 
} 
 
}); 
 
        $ (' #reg ') when the dialog box begins to move. Dialog ({dragstart:function (E, UI) {alert (' top: ' + ui.position.top + ' \ n ') 
 
  + ' Left: ' + ui.position.left); 
 
} 
 
});  $ (' #reg ') when the dialog box ends moving. dialog ({dragstop:function (E, UI) {alert (' top: ' + ui.position.top + ' \ n ' + 
 
  ' Left: ' + ui.position.left); 
 
} 
 
}); 
 
 When resizing the dialog box $ (' #reg '). Dialog ({resize:function (E, UI) {  Alert (' Size: ' + ui.size.width + ' \ n ' + ' originalsize: ' + ui.originalSize.width '); 
 
} 
 
}); 
 
        When you start resizing the dialog box $ (' #reg '). Dialog ({resizestart:function (E, UI) {alert (' Size: ' + ui.size.width + ' \ n ') 
 
  + ' originalsize: ' + ui.originalSize.width); 
 
} 
 
}); 
 
        End Resizing dialog box $ (' #reg '). Dialog ({resizestop:function (E, UI) {alert (' Size: ' + ui.size.width + ' \ n ') 
 
  + ' originalsize: ' + ui.originalSize.width); 
 } 
 
});

dialog (' Action ', param) method
Method
return value
Description
Dialog (' Open ')
JQuery objects
Open a dialog box
dialog (' Close ')
JQuery objects
Close the dialog box
Dialog (' Destroy ')
JQuery objects
Delete the dialog box and directly block the dialog
Dialog (' IsOpen ')
Boolean value
To determine whether a dialog box is open
Dialog (' widget ')
JQuery objects
Get the JQuery object for the dialog box
Dialog (' option ', param)
General value
Get the value of the Options property
Dialog (' option ', param, value)
JQuery objects
Set the value of the Options property

Initial hidden dialog box 
$ (' #reg '). Dialog ({ 
 
  autoopen:false 
 
}); 
 
Open the dialog box 
$ (' #reg_a '). Click (function () { 
 
  $ (' #reg '). Dialog (' Open '); 
 
}; 
 
Closes the dialog box 
$ (' #reg '). Click (function () { 
 
  $ (' #reg '). Dialog (' Close '); 
 
}); 
 
The decision dialog box opens or closes the status 
$ (document). Click (function () { 
 
  alert ($ (' #reg '). Dialog (' IsOpen ' 
 
)); The specified dialog box is placed before 
$ (document). Click (function () { 
 
  $ (' #reg '). Dialog (' Movetotop '); 
 
}); 
 
Gets the value of the Param option for a options 
var title = $ (' #reg '). Dialog (' option ', ' title '); 
 
Alert (title); 
 
 
Sets the value of the Param option for a certain options 
$ (' #reg '). Dialog (' option ', ' title ', ' Register '); 

Five Use on () in dialog
in dialog events, an event method that is handled using the on () method is provided.

A dialog box event triggered by the On () method
Effect Name
Description
Dialogfocus
Trigger when focus is received
Dialogopen
triggered when displayed
Dialogbeforeclose
Triggered when it is going to close
Dialogclose
triggered when off
Dialogdrag
Triggered every time you move
Dialogdragstart
Trigger when start move
Dialogdragstop
Trigger after move ends
Dialogresize
Fires each time the size is resized
Dialogresizestart
Trigger when resizing starts
Dialogresizestop
Triggering when resizing is finished

$ (' #reg '). On (' Dialogclose ', function () { 
 
  alert (' Close '); 
 
}); 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.