您的位置：首页 > 产品设计 > UI/UE

EASYUI Dialog的基本使用

2015-12-28 14:49 369 查看

1、基本使用

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dialog</title>
<link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#dlg').dialog({
title: '对话框',
iconCls: "icon-edit",
collapsible: true,
minimizable: true,
maximizable: true,
resizable: true,
width: 300,
height: 200,
modal: true
});
});
</script>
</head>
<body>
<div id="dlg">
Content
</div>
</body>
</html>

或

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dialog</title>
<link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
</head>
<body>
<div id="dlg" class="easyui-dialog" style="width:300px; height:200px;" title="对话框" iconCls="icon-edit">
Content
</div>
</body>
</html>

效果图：

2、工具栏、按钮栏

代码：

<script type="text/javascript">
$(function () {
$('#dlg').dialog({
title: '对话框',
iconCls:"icon-edit",
collapsible: true,
minimizable: true,
maximizable: true,
resizable: true,
width: 300,
height: 200,
modal: true,
href: "Content.aspx",
onClose: function () {
alert("Close");
},
toolbar: [{
text: 'Add',
iconCls: 'icon-add',
handler: function () {
alert('add');
}
}, '-', {
text: 'Save',
iconCls: 'icon-save',
handler: function () {
alert('save');
}
}],
buttons: [{
text: 'Ok',
iconCls: 'icon-ok',
handler: function () {
alert('ok');
}
}, {
text: 'Cancel',
iconCls: 'icon-cancel',
handler: function () {
$('#dlg').dialog('close');
}
}]
});
});
</script>

效果图：

3、参数

属性名	类型	描述	默认值
title	字符串	对话框的标题文本	New Dialog
collapsible	布尔	定义是否显示可折叠按钮	false
minimizable	布尔	定义是否显示最小化按钮	false
maximizable	布尔	定义是否显示最大化按钮	false
resizable	布尔	定义对话框是否可编辑大小	false
toolbar	数组	对话框上的工具条，每个工具条包括:	text, iconCls, disabled, handler etc. null
buttons	数组	对话框底部的按钮，每个按钮包括:	text, iconCls, handler etc. null

4、事件

Dialog的事件和窗口(Window)的事件相同。

5、方法

Dialog的函数方法和窗口(Window)的相同。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航