Overview of jquery UI's dialog user documentation

Source: Internet
Author: User

Overview of jquery UI's dialog user documentation
A floating window contains the title and content. You can move, resize, and close the icon '× '. If the content length exceeds the display in the dialog box content area, the scroll bar is displayed automatically. In addition, there are some common options, such as adding a button bar at the bottom and a screen in the mode window.

Official example address:

Http://jqueryui.com/demos/dialog/

· Parameter (Name: parameter type: default value)
Autoopen: Boolean: True
If it is set to true, after the page is loaded by default,

The dialog box is automatically displayed. On the contrary, the hidden status is processed.


Initial: $ ('. selector'). Dialog ({autoopen:

False });
Obtain: var autoopen =

$ ('. Selector'). Dialog ('option ',

'Autoopen ');
Settings: $ ('. selector'). Dialog ('option ',

'Autoopen', false );

Bgiframe: Boolean: false
If this parameter is set to true, the bgiframe plug-in is called.

Cannot be displayed in other controls in IE6 Browser

(Select, flash.
Initial: $ ('. selector'). Dialog ({bgiframe:

True });
Get: var bgiframe =

$ ('. Selector'). Dialog ('option ',

'Bgiframe ');
Settings: $ ('. selector'). Dialog ('option ',

'Bgiframe', true );

Buttons: Object :{}
Add buttons and processing functions for the dialog box.
Initial: $ ('. selector'). Dialog ({buttons:

{"OK": function () {$ (this). Dialog

("Close ");}}});
Get: var buttons =

$ ('. Selector'). Dialog ('option ',

'Buttons ');
Settings: $ ('. selector'). Dialog ('option ',

'Buttons', {"OK": function (){

$ (This). Dialog ("close ");}});

Closeonescape: Boolean: True
Set whether to press ESC when the dialog box is opened

Close the dialog box.
Initial: $ ('. selector'). Dialog ({

Closeonescape: false });
Get: var closeonescape =

$ ('. Selector'). Dialog ('option ',

'Closeonescape ');
Settings: $ ('. selector'). Dialog ('option ',

'Closeonescape ', false );

Dialogclass: String :''
Specifies the class name, which is displayed in

Question.
Initial: $ ('. selector'). Dialog ({

Dialogclass: 'alert '});
Get: var dialogclass =

$ ('. Selector'). Dialog ('option ',

'Dialogclass ');
Settings: $ ('. selector'). Dialog ('option ',

'Dialogclass', 'alert ');

Draggable: Boolean: True
If this parameter is set to true, you can drag the title of the dialog box.

Bar to move the window.
Initial: $ ('. selector'). Dialog ({

Draggable: false });
Get: var draggable =

$ ('. Selector'). Dialog ('option ',

'Draggable ');
Settings: $ ('. selector'). Dialog ('option ',

'Draggable', false );

Height: Number: 'auto'
Set the height of the dialog box (unit: pixels ).
Initial: $ ('. selector'). Dialog ({height:

530 });
Get: var Height =

$ ('. Selector'). Dialog ('option ',

'Height ');
Settings: $ ('. selector'). Dialog ('option ',

'Height', 530 );

Hide: String: NULL
Disable (hide) the dialog box to add animation effects.


Initial: $ ('. selector'). Dialog ({hide:

'Slide '});
Get: var hide = $ ('. selector'). Dialog

('Option', 'hide ');
Settings: $ ('. selector'). Dialog ('option ',

'Hide ', 'slide ');

Maxheight: Number: false
Set the maximum height (unit: pixels) of the dialog box ).
Initial: $ ('. selector'). Dialog ({

Maxheight: 400 });
Obtain: var maxheight =

$ ('. Selector'). Dialog ('option ',

'Maxheight ');
Settings: $ ('. selector'). Dialog ('option ',

'Maxheight', 400 );

Maxwidth: Number: false
Set the maximum width (unit: pixels) of the dialog box ).
Initial: $ ('. selector'). Dialog ({maxwidth:

600 });
Obtain: var maxwidth =

$ ('. Selector'). Dialog ('option ',

'Maxwidth ');
Settings: $ ('. selector'). Dialog ('option ',

'Width', 600 );

Minheight: Number: 150
Set the minimum height (unit: pixels) of the dialog box ).
Initial: $ ('. selector'). Dialog ({

Minheight: 300 });
Get: var minheight =

$ ('. Selector'). Dialog ('option ',

'Minheight ');
Settings: $ ('. selector'). Dialog ('option ',

'Minheight', 300 );

Minwidth: Number: 150
Set the minimum width (unit: pixels) of the dialog box ).
Initial: $ ('. selector'). Dialog ({minwidth:

400 });
Get: var minwidth =

$ ('. Selector'). Dialog ('option ',

'Minwidth ');
Settings: $ ('. selector'). Dialog ('option ',

'Minwidth', 400 );

Modal: Boolean: false
Whether the window is a mode window. If this parameter is set to true

There is a screen before all the elements.
Initial: $ ('. selector'). Dialog ({modal:

True });
Get: var modal =

$ ('. Selector'). Dialog ('option', 'modal ');


Settings: $ ('. selector'). Dialog ('option ',

'Modal', true );

Position: String, array: 'center'
Set the initial display position of the dialog box. Optional values:

'Center', 'left', 'right', 'top ',

'Bottom ', or an array ['right', 'top']
Initial: $ ('. selector'). Dialog ({position:

'Top '});
Get: var position =

$ ('. Selector'). Dialog ('option ',

'Position ');
Settings: $ ('. selector'). Dialog ('option ',

'Position', 'top ');

Resizable: Boolean: True
Set whether the dialog box can be adjusted.
Initial: $ ('. selector'). Dialog ({

Resizable: false });
Get: var resizable =

$ ('. Selector'). Dialog ('option ',

'Resizable ');
Settings: $ ('. selector'). Dialog ('option ',

'Resizable', false );

Show: String: NULL
Used to display the dialog box.
Initial: $ ('. selector'). Dialog ({show:

'Slide '});
Get: var show = $ ('. selector'). Dialog

('Option', 'show ');
Settings: $ ('. selector'). Dialog ('option ',

'Show', 'slide ');

STACK: Boolean: True
Set whether the dialog box is prefixed to another dialog box when moving

Front.
Initial: $ ('. selector'). Dialog ({Stack:

False });
Obtain: var stack =

$ ('. Selector'). Dialog ('option', 'stack ');


Settings: $ ('. selector'). Dialog ('option ',

'Stack', false );

Title: String :''
Specify the dialog box title. You can also attach a Meta in the dialog box.

Set the title in the title attribute.
Initial: $ ('. selector'). Dialog ({Title:

'Dialog title '});
Obtain: var Title =

$ ('. Selector'). Dialog ('option', 'title ');


Settings: $ ('. selector'). Dialog ('option ',

'Title', 'Dialog title ');

Width: Number: 300
Set the dialog box width (unit: pixels ).
$ ('. Selector'). Dialog ({width: 460 });


Get: var width =

$ ('. Selector'). Dialog ('option', 'width ');


Settings: $ ('. selector'). Dialog ('option ',

'Width', 460 );

Zindex: INTEGER: 1000
Set the zindex value in the dialog box.
Initial: $ ('. selector'). Dialog ({zindex:

3999 });
Get: var zindex =

$ ('. Selector'). Dialog ('option ',

'Zindex ');
Settings: $ ('. selector'). Dialog ('option ',

'Zindex', 3999 );


· Events
Beforeclose: dialogbeforeclose
This event is triggered before the dialog box is closed. If

False, the dialog box is still displayed.
Initial: $ ('. selector'). Dialog ({

Beforeclose: function (event, UI ){...}

});
Binding: $ ('. selector'). Bind

('Dialogbeforeclose', function (event, UI)

{...});

Open: dialogopen
This event is triggered when the dialog box is opened.
Initial: $ ('. selector'). Dialog ({open:

Function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('dialogopen ',

Function (event, UI ){...});

Focus: dialogfocus
This event is triggered when the dialog box gets the focus.
Initial: $ ('. selector'). Dialog ({focus:

Function (event, UI ){...}});
Binding: $ ('. selector'). Bind

('Dialogfocal ', function (event, UI ){...

});

Dragstart: dragstart
This event is triggered when the drag start dialog box is moved.
Initial: $ ('. selector'). Dialog ({

Dragstart: function (event, UI ){...}

});
Binding: $ ('. selector'). BIND ('dragstart ',

Function (event, UI ){...});

Drag: Drag
This event is triggered when the drag and drop dialog box is moved.
Initial: $ ('. selector'). Dialog ({drag:

Function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('drag ',

Function (event, UI ){...});

Dragstop: dragstop
This event is triggered when the drag-and-drop dialog box action ends.
Initial: $ ('. selector'). Dialog ({dragstop:

Function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('dragstop ',

Function (event, UI ){...});

Resizestart: resizestart
This event is triggered when the dialog box is changed.
Initial: $ ('. selector'). Dialog ({

Resizestart: function (event, UI ){...}

});
Binding: $ ('. selector'). Bind

('Resizestart', function (event, UI ){...

});

Resize: resize
This event is triggered when the dialog box size changes.
Initial: $ ('. selector'). Dialog ({resize:

Function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('resize ',

Function (event, UI ){...});

Resizestop: resizestop
This event is triggered when the dialog box size changes.
Initial: $ ('. selector'). Dialog ({

Resizestop: function (event, UI ){...}

});
Binding: $ ('. selector'). BIND ('resizestop ',

Function (event, UI ){...});

Close: dialogclose
This event is triggered when the dialog box is closed.
Initial: $ ('. selector'). Dialog ({close:

Function (event, UI ){...}});
Binding: $ ('. selector'). Bind

('Dialogclose', function (event, UI ){...

});


· Attributes
Destroy
Destroy dialog box objects.
Usage:. Dialog ('deststroy ')

Disable
Disable dialog box.
Usage:. Dialog ('disable ')

Enable
Enable dialog box.
Usage:. Dialog ('enable ')

Option
Obtain or set the properties of the dialog box.
Usage:. Dialog ('option', optionname,

[Value])

Close
Close the dialog box.
Usage:. Dialog ('close ')

Isopen
Determines whether the dialog box is opened.
Usage:. Dialog ('isopen ')

Movetotop
Move the dialog box to the top-level display.
Usage:. Dialog ('movetotop ')

Open
Open the dialog box.
Usage:. Dialog ('open ')
 

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.