DIV CSS 佈局教程網

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

js代碼：
代碼如下:
<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('添加數據')
}
},{
text: '保存',
iconCls: 'icon-save',
handler: function() {
alert('保存數據')
}
}],
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function() {
alert('提交數據');
}
}, {
text: '取消',
handler: function() {
$('#mydialog').dialog('取消');
}
}]
});
}
</script>

HTML代碼
代碼如下:
<span onclick="Open_Dialog()">彈框</span>
<div id="mydialog" style="display:none;padding:5px;width:400px;height:200px;" title="彈框練習">
<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的具體用法，首先來看屬性大多數的屬性和窗口(Window)的屬性是相同的，下面列出一些 Dialog私有的屬性：
屬性名 類型 描述 默認值 title 字符串 對話框的標題文本 New Dialog collapsible 布爾 定義是否顯示可折疊按鈕 false minimizable 布爾 定義是否顯示最小化按鈕 false maximizable 布爾 定義是否顯示最大化按鈕 false resizable 布爾 定義對話框是否可編輯大小 false toolbar 數組 對話框上的工具條，每個工具條包括: text, iconCls, disabled, handler etc. null buttons 數組 對話框底部的按鈕，每個按鈕包括: text, iconCls, handler etc. null事件
Dialog的事件和窗口(Window)的事件相同。

方法
除了”header”和”body”以外，Dialog的函數方法和窗口(Window)的相同