JQuery EasyUI 對話框的使用方法

更新時間：2010年10月24日 16:19:34 作者：

jQuery EasyUI 對話框(Dialog)用法與EasyUI的窗口用法極為相似，最終的效果圖也只與窗口的效果圖差幾個按鈕

下面看一下EasyUI的對話框效果圖

js代碼：

復(fù)制代碼代碼如下:

 
<script language="javascript" type="text/javascript"> 
function Open_Dialog() { 
$('#mydialog').show(); 
$('#mydialog').dialog({ 
collapsible: true, 
minimizable: true, 
maximizable: true, 
toolbar: [{ 
text: '添加', 
iconCls: 'icon-add', 
handler: function() { 
alert('添加數(shù)據(jù)') 
} 
},{ 
text: '保存', 
iconCls: 'icon-save', 
handler: function() { 
alert('保存數(shù)據(jù)') 
} 
}], 
buttons: [{ 
text: '提交', 
iconCls: 'icon-ok', 
handler: function() { 
alert('提交數(shù)據(jù)'); 
} 
}, { 
text: '取消', 
handler: function() { 
$('#mydialog').dialog('取消'); 
} 
}] 
}); 
} 
</script> 

HTML代碼

復(fù)制代碼代碼如下:

 
<span onclick="Open_Dialog()">彈框</span> 
<div id="mydialog" style="display:none;padding:5px;width:400px;height:200px;" title="彈框練習(xí)"> 
<input id="txRoleID" type="hidden" runat="server" value="0" /> 
<label class="lbInfo">角色名稱：</label> 
<input id="txRolename" type="text" class="easyui-validatebox" required="true" runat="server" /><br /> 
<label class="lbInfo"> </label><input type="submit" onserverclick="saveRole" value="保存" runat="server" /> 
<label id="lbmsg" runat="server"></label> 
</div> 

下面來介紹Window的具體用法，首先來看屬性大多數(shù)的屬性和窗口(Window)的屬性是相同的，下面列出一些 Dialog私有的屬性：

屬性名	類型	描述	默認(rèn)值
title	字符串	對話框的標(biāo)題文本	New Dialog
collapsible	布爾	定義是否顯示可折疊按鈕	false
minimizable	布爾	定義是否顯示最小化按鈕	false
maximizable	布爾	定義是否顯示最大化按鈕	false
resizable	布爾	定義對話框是否可編輯大小	false
toolbar	數(shù)組	對話框上的工具條，每個工具條包括: text, iconCls, disabled, handler etc.	null
buttons	數(shù)組	對話框底部的按鈕，每個按鈕包括: text, iconCls, handler etc.	null