jQuery EasyUI 窗口 - 自定义带有东西条和按钮的对话框

您能够创立一个带有东西栏(toolbar)和按钮(button)的对话框(dialog),能够从 HTML 符号创立。这个教程描绘怎么增加东西栏(toolbar)和按钮(button)到对话框(dialog),没有任何的 javascript 代码。

创立对话框(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>

创立东西栏(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>

创立按钮(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>

请注意,对话框(dialog)的东西栏(toolbar)和按钮(buttons)特点也能够经过 string 值指定,它将充任作为一个挑选器去挑选一个恰当的 DIV 元素,并追加到东西栏(toolbar)或许按钮(buttons)的方位。

下载 jQuery EasyUI 实例

jeasyui-win-dlg2.zip