EasyUI创建对话框的两种方式
时间：2020-10-27 15:31:38|栏目：jquery|点击： 次
对话框（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="jquery.min.js"></script> <!-- 导入easyui核心js文件 --> <script type="text/javascript" src="jquery.easyui.min.js"></script> <!-- 导入本地语言的js文件--> <script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script> <!-- 导入css --> <!-- 导入easyui的默认css文件--> <link type="text/css" rel="stylesheet" href="themes/default/easyui.css"/> <!-- 导入图标的css文件 --> <link type="text/css" rel="stylesheet" href="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="jquery.min.js"></script>
<!-- 导入easyui核心js文件 -->
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<!-- 导入本地语言的js文件-->
<script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>
<!-- 导入css -->
<!-- 导入easyui的默认css文件-->
<link type="text/css" rel="stylesheet" href="themes/default/easyui.css"/>
<!-- 导入图标的css文件 -->
<link type="text/css" rel="stylesheet" href="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>
