EasyUI创建对话框的两种方式


Posted in Javascript onAugust 23, 2016

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

EasyUI创建对话框的两种方式

这种就是对话框了。

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创建对话框的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 面向对象的JavaScript类
May 04 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 #Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 #Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 #Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 #Javascript
深入浅出 jQuery中的事件机制
Aug 23 #Javascript
javascript实现简单的on事件绑定
Aug 23 #Javascript
js实现图片淡入淡出切换简易效果
Aug 22 #Javascript
You might like
PHP中设置时区方法小结
2012/06/03 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
go和python调用其它程序并得到程序输出
2014/02/10 Python
python之wxPython菜单使用详解
2014/09/28 Python
python创建和删除目录的方法
2015/04/29 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
Python json格式化打印实现过程解析
2020/07/21 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
大专生自荐信
2013/10/04 职场文书
高一英语教学反思
2014/01/22 职场文书
行政内勤岗位职责
2014/04/07 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
世界地球日活动总结
2015/02/09 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
关于幸福的感言
2015/08/03 职场文书
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python