请选择 进入手机版 | 继续访问电脑版
  • 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

jQuery EasyUI 窗口 – 自定义带有工具条和按钮的对话框

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

在上一节内容中,我们介绍了如何在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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
jQuery EasyUI 树形菜单 – 使用标记创建树形菜单发布时间:2022-01-28
下一篇:
jQuery EasyUI 窗口 – 创建对话框发布时间:2022-01-28
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap