EasyUI创建对话框的两种方式

前端技术 2023/09/07 JavaScript

对话框（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>

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

本文地址：https://www.stayed.cn/item/18364

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案