讲师中心 微信公众号
AI工具推荐 视频效率加速

手册目录

jQuery EasyUI中文参考手册

浏览29136
更新时间2022-04-12

您可以创建一个带有工具栏(toolbar)和按钮(button)的对话框(dialog),可以从 HTML 标记创建。这个教程描述如何添加工具栏(toolbar)和按钮(button)到对话框(dialog),没有任何的 javascript 代码。

101.png

创建对话框(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="../style/images/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

精品课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时 | 65.3万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时 | 41.5万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时 | 77.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn