How to use the JQuery Easyui dialog box _jquery

Here's a look at the Easyui dialog box effect chart

JS Code:

Copy Code code 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 Code code as follows:

<span onclick= "Open_dialog ()" > Bomb frame </span>
<div id= "Mydialog" style= "display:none;padding:5px;width:400px;height:200px" title= "Frame Practice" >
<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>

The following is an introduction to the specific use of Windows, starting with the properties of most properties and Windows (window) are the same, listed below for some dialog private properties:

Property name	type	Description	Default Value
Title	String	Title Text of the dialog box	New Dialog
Collapsible	Boolean	Define whether to display a collapsible button	False
Minimizable	Boolean	Define whether to show minimized buttons	False
Maximizable	Boolean	Define whether to display the Maximize button	False
Resizable	Boolean	To define whether the dialog box is editable size	False
Toolbar	Array	The toolbar on the dialog box, each toolbar includes: text, ICONCLS, disabled, handler etc.	Null
Buttons	Array	button at the bottom of the dialog box, each button includes: text, ICONCLS, handler etc.	Null

Event
Dialog events and Windows (window) events are the same.

Method
In addition to "header" and "Body", the dialog function method and window (Windows) are the same