EasyUi常用组件(四)Dialog对话框、创建按钮(Buttons)、创建工具栏(Toolbar)

对话框(Dialog)非常简单,可以从 DIV 标记创建,如下所示:

<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>

使用JavaScript创建对话框也是允许的。现在,让我们创建一个模态对话框,然后调用“refresh”方法通过Ajax加载的内容。

1.<div id="dd">Dialog Content.</div>  

您可以创建一个带有工具栏(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>

使用流程:

1、js初始化组件设定

2、Js请求服务器,返回特定格式的json数据

3.系统多为页签模式,在每个id和方法后,加一个随机数


本博客所有文章如无特别注明均为原创。作者:长颈鹿复制或转载请以超链接形式注明转自 SZY
原文地址《EasyUi常用组件(四)Dialog对话框、创建按钮(Buttons)、创建工具栏(Toolbar)

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)