jQuery EasyUI 窗口 – 自定義帶有工具條和按鈕的對(duì)話框

jQuery EasyUI 窗口 - 自定義帶有工具條和按鈕的對(duì)話框

在上一節(jié)內(nèi)容中，我們介紹了如何在jQuery EasyUI中創(chuàng)建一個(gè)簡單的對(duì)話框，本節(jié)，你將了解如何為對(duì)話框添加工具欄和按鈕。

您可以創(chuàng)建一個(gè)帶有工具欄（toolbar）和按鈕（button）的對(duì)話框（dialog），可以從HTML標(biāo)記創(chuàng)建。

下述的示例描述了如何添加工具欄（toolbar）和按鈕（button）到對(duì)話框（dialog），不需要使用任何的javascript代碼。

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

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

創(chuàng)建工具欄（Toolbar）

	<div id="dlg-toolbar">
		<table cellpadding="0" cellspacing="0" style="width:100%">
			<tr>
				<td>
					<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Edit</a>
					<a href="#" class="easyui-linkbutton" iconCls="icon-help" plain="true">Help</a>
				</td>
				<td style="text-align:right">
					<input></input><a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true"></a>
				</td>
			</tr>
		</table>
	</div>

創(chuàng)建按鈕（Buttons）

	<div id="dlg-buttons">
		<table cellpadding="0" cellspacing="0" style="width:100%">
			<tr>
				<td>
					<img src="email.gif"/>
				</td>
				<td style="text-align:right">
					<a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="javascript:alert('save')">Save</a>
					<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Close</a>
				</td>
			</tr>
		</table>
	</div>

請(qǐng)注意，對(duì)話框（dialog）的工具欄（toolbar）和按鈕（buttons）屬性也可以通過string值指定，它將充當(dāng)作為一個(gè)選擇器去選擇一個(gè)適當(dāng)?shù)腄IV元素，并追加到工具欄（toolbar）或者按鈕（buttons）的位置。

下載 jQuery EasyUI 實(shí)例

jeasyui-win-dlg2.zip