EasyUI创建对话框的两种方式 - [技术教程]

对话框（Dialog）是一个特殊的窗口（window），可以包含在顶部的工具栏和在底部的按钮。默认情况下，对话框（Dialog）不能改变大小，但是用户可以设置 resizable 属性为 true，使其可以改变大小。

查看图片

这种就是对话框了。

EasyUI有两种创建方式：

第一种：通过已存在的DOM节点元素标签创建

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
< 导入js文件 -->
< 导入jquery核心js文件 -->
<script type="text/javascript" src="http://www.gimoo.net/t/1901/jquery.min.js"></script>
< 导入easyui核心js文件 -->
<script type="text/javascript" src="http://www.gimoo.net/t/1901/jquery.easyui.min.js"></script>
< 导入本地语言的js文件-->
<script type="text/javascript" src="http://www.gimoo.net/t/1901/locale/easyui-lang-zh_CN.js"></script>
< 导入css -->
< 导入easyui的默认css文件-->
<link type="text/css" rel="stylesheet" href="http://www.gimoo.net/t/1901/themes/default/easyui.css"/>
< 导入图标的css文件 -->
<link type="text/css" rel="stylesheet" href="http://www.gimoo.net/t/1901/themes/icon.css"/>
</head>
<body>
<div id="dd" class="easyui-dialog" title="我的对话框" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true"> 
提示内容
</div> 
</body>
</html>

第二种：通过js动态创建对话框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
< 导入js文件 -->
< 导入jquery核心js文件 -->
<script type="text/javascript" src="http://www.gimoo.net/t/1901/jquery.min.js"></script>
< 导入easyui核心js文件 -->
<script type="text/javascript" src="http://www.gimoo.net/t/1901/jquery.easyui.min.js"></script>
< 导入本地语言的js文件-->
<script type="text/javascript" src="http://www.gimoo.net/t/1901/locale/easyui-lang-zh_CN.js"></script>
< 导入css -->
< 导入easyui的默认css文件-->
<link type="text/css" rel="stylesheet" href="http://www.gimoo.net/t/1901/themes/default/easyui.css"/>
< 导入图标的css文件 -->
<link type="text/css" rel="stylesheet" href="http://www.gimoo.net/t/1901/themes/icon.css"/>
</head>
<body>
<<div id="dd" class="easyui-dialog" title="我的对话框" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true"> 
提示内容
</div> --> 
<div id="dd">对话框内容</div>
<script type="text/javascript">
$("#dd").dialog({
title: '我的对话框', //标题
collapsible:true, //是否可折叠
minimizable:true, //最小化按钮
maximizable:true,//最大化按钮
resizable:true,//是否改变窗口大小
width: 400, 
height: 200, 
closed: false, 
cache: false, 
href: 'beautiful.html', 
});
</script>
</body>
</html>

以上所述是小编给大家介绍的EasyUI创建对话框的两种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对绿夏网网站的支持！

UI

#免责声明#

本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解！

文章分类