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 code
Copy 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.