easyUI入门《十四、dialog基础：对话框》

最新推荐文章于 2022-04-12 23:05:04 发布

leijiahui

最新推荐文章于 2022-04-12 23:05:04 发布

阅读量117

点赞数

分类专栏： easyUI

本文链接：https://blog.csdn.net/leijiahui/article/details/82430383

版权

easyUI 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!--引入基本库-->
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/default/easyui.css" />
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/icon.css" />
	</head>

	<body>
		<!--
			头工具栏：add+save
			脚工具栏：ok+cancel
			初始打开：closed:false
			远程引用
		-->
		<div class="easyui-dialog" style="width: 400px;height: 300px;" title="方式一" data-options="toolbar:[{
				iconCls:'icon-add',
				text:'Add',
				handler:function(){
					alert('add')
				}
			},'-',{
				iconCls:'icon-save',
				text:'Save',
				handler:function(){
					alert('save')
				}
			}],buttons:[{
				iconCls:'icon-ok',
				text:'OK',
				handler:function(){
					alert('OK')
				}
			},{
				iconCls:'icon-cancel',
				text:'Cancel',
				handler:function(){
					alert('Cancel')
				}
			}],closed:false">
			
		</div>

		<div class="easyui-dialog" style="width: 800px;height: 600px;" title="方式二" data-options="toolbar:'#tool',buttons:'#btn'">
			
		</div>
		<div id="tool">
			<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="javascript:alert('add')">Add</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="javascript:alert('save')">Save</a>
		</div>

		<div id="btn">
			<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok',plain:true" onclick="javascript:alert('add')">OK</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true" onclick="javascript:alert('cancel')">Cancel</a>
		</div>

		<div id="js-dialog" style="width: 1200px;height: 900px;">
			
		</div>
		<script type="text/javascript">
			$("#js-dialog").dialog({
				title: '方式三',
				toolbar: [{
					iconCls: 'icon-add',
					text: 'Add',
					handler: function() {
						alert('add')
					}
				}, '-', {
					iconCls: 'icon-save',
					text: 'Save',
					handler: function() {
						alert('save')
					}
				}],
				buttons: [{
					iconCls: 'icon-ok',
					text: 'OK',
					handler: function() {
						alert('OK')
					}
				}, {
					iconCls: 'icon-cancel',
					text: 'Cancel',
					handler: function() {
						alert('Cancel')
					}
				}],
				href: 'tree.html'
			})
		</script>
	</body>

</html>

leijiahui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyUI入门《十四、dialog基础：对话框》

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;!--引入基本库--&gt; &lt;script type="text/javascr
复制链接

扫一扫

专栏目录