jQuery EasyUI 窗口 – 創(chuàng)建對(duì)話框

jQuery EasyUI 窗口 - 創(chuàng)建對(duì)話框

本節(jié)介紹如何在jQuery EasyUI窗口（window）類型中對(duì)話框（Dialog）的創(chuàng)建。

對(duì)話框是一個(gè)特殊的窗口，可以包含在頂部的工具欄和在底部的按鈕。默認(rèn)情況下，對(duì)話框不能改變大小，但是用戶可以設(shè)置resizable屬性為true，使其可以改變大小。

以下內(nèi)容展示了對(duì)話框的創(chuàng)建過程。

創(chuàng)建對(duì)話框（Dialog）

對(duì)話框（Dialog）非常簡(jiǎn)單，可以從DIV標(biāo)記創(chuàng)建，如下所示：

	<div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;" title="My Dialog" iconCls="icon-ok" 			      toolbar="#dlg-toolbar" buttons="#dlg-buttons">
		Dialog Content.
	</div>

準(zhǔn)備工具欄（Toolbar）和按鈕（Button）

	<div id="dlg-toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:alert('Ok')">Ok</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Cancel</a>
	</div>

上面的代碼我們創(chuàng)建了一個(gè)帶有工具欄（toolbar）和按鈕（button）的對(duì)話框（dialog）。這是對(duì)話框（dialog）、工具欄（toolbar）、內(nèi)容（content）和按鈕（buttons）的標(biāo)準(zhǔn)配置。

下載 jQuery EasyUI 實(shí)例

jeasyui-win-dlg1.zip