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 attachEvent和addEventListener使用方法
Mar 19 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
使用javascript获取页面名称
Dec 23 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 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 分页类实现代码
2009/12/03 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
python实现支付宝转账接口
2019/05/07 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
基于opencv实现简单画板功能
2020/08/02 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
python中re模块知识点总结
2021/01/17 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
建筑自我鉴定
2013/10/19 职场文书
采购部部门职责
2013/12/15 职场文书
高校教师思想汇报
2014/01/11 职场文书
文明市民先进事迹
2014/05/15 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
庐山导游词
2015/02/03 职场文书
慰问信模板
2015/02/14 职场文书
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python