How to Use the JQuery EasyUI dialog box

Next let's take a look at the EasyUI dialog box.

Js Code: Copy codeThe Code is as follows: <script language = "javascript" type = "text/javascript">
Function Open_Dialog (){
$ ('# Mydialog'). show ();
$ ('# Mydialog'). dialog ({
Collapsible: true,
Minimizable: true,
Maximizable: true,
Toolbar :[{
Text: 'add ',
IconCls: 'icon-add ',
Handler: function (){
Alert ('add data ')
}
},{
Text: 'save ',
IconCls: 'icon-save ',
Handler: function (){
Alert ('Save data ')
}
}],
Buttons :[{
Text: 'Submit ',
IconCls: 'icon-OK ',
Handler: function (){
Alert ('submit data ');
}
},{
Text: 'cancel ',
Handler: function (){
$ ('# Mydialog'). dialog ('cancel ');
}
}]
});
}
</Script>

HTML codeCopy codeThe Code is as follows: <span onclick = "Open_Dialog ()"> dialog box </span>
<Div id = "mydialog" style = "display: none; padding: 5px; width: 400px; height: 200px;" title = "bullet box exercise">
<Input id = "txRoleID" type = "hidden" runat = "server" value = "0"/>
<Label class = "lbInfo"> role name: </label>
<Input id = "txRolename" type = "text" class = "easyui-validatebox" required = "true" runat = "server"/> <br/>
<Label class = "lbInfo"> </label> <input type = "submit" onserverclick = "saveRole" value = "save" runat = "server"/>
<Label id = "lbmsg" runat = "server"> </label>
</Div>

Next we will introduce the specific usage of Window. First, we can see that most of the properties of the Window are the same as those of the Window. Below we will list some Dialog private properties:

Attribute name	Type	Description	Default Value
Title	String	Title Text of the dialog box	New Dialog
Collapsible	Boolean	Define whether to display the foldable button	False
Minimizable	Boolean	Define whether to display the minimization button	False
Maximizable	Boolean	Define whether to display the maximize button	False
Resizable	Boolean	Define whether the dialog box can be edited.	False
Toolbar	Array	Toolbar on the dialog box. Each toolbar includes text, iconCls, disabled, and handler etc.	Null
Buttons	Array	Buttons at the bottom of the dialog box, including text, iconCls, and handler etc.	Null

Event
The Dialog event is the same as the Window event.

Method
Except for "header" and "body", the Dialog function method is the same as that of the Window.