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="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创建对话框的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
这篇文章主要为大家详细介绍了jQuery Json数据格式排版高亮插件json-viewer.js的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-06-06在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
easyUI是jquery的一个插件,是民间的插件,easyUI使用起来很方便,里面有网页制作的最重要的三大方块:javascript代码、html代码和Css样式,但是很容易出现jquery.easyui.min.js函数库问题,小编教大家如何解决问题,需要的朋友可以参考下2015-09-09jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
这篇文章主要介绍了jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法,涉及jQuery插件EasyUI相关属性设置技巧,需要的朋友可以参考下2016-08-08
最新评论