注意首先要在title后面导入配置文件，前后顺序不能乱

<!-- 1.jQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<!-- 2.css资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
<!-- 3. 图标资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
<!-- 4.easyui的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<!-- 5.本地语言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

一。messager

在$(function(){}的大括号了写。

1.messager.alert

红框分别代表：标题，内容，图标，

function是回调函数

2.confirm确认消息框

标题
消息内容
回调函数

当点击按钮关闭窗口时触发
点确定返回true
点取消返回false

function（r）{if(r){点确定之后执行的代码}}

	$("#bt1").click(

		function(){

			//弹出确认对话框

			$.messager.confirm("确认","小付确实是王八蛋吗？",

				function(r){

					if(r)

						{

							alert("确定删除王八蛋");

						}

					else

						{

						alert("取消删除王八蛋");

						}

				}

			);

		}		

	);

　　3.prompt 输入对话框

	//输入对话框

	$("#bt2").click(

		function(){

			$.messager.prompt("输入框","请输入姓名",

				function(val){

					if(val)

						{

						alert("姓名是"+val);

						}

				}

			);

		}

	);

　　4.progress  进度消息框

	//进度对话框

	$("#bt3").click(

		function(){

			$.messager.progress(

				{

					title:"进度条",

					msg:"能量加载中。。。",

					text:"请稍后。。。",

					interval:1000

				}		

			);

		}

	);

　　5.show  气泡消息框

	//气泡式

	$("#bt4").click(

		function(){

			$.messager.show(

				{

					title:"消息",

					msg:"消息内容",

					//showType:"fade",

					showSpeed:600,

					width:400,

					height:200,

					timeout:5000

				}

			);

		}

	);

　　二.window

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<!-- 顺序不可以乱 -->

<!-- 1.jQuery的js包 -->

<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>

<!-- 2.css资源 -->

<link  rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">

<!-- 3. 图标资源 -->

<link  rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">

<!-- 4.easyui的js包 -->

<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

<!-- 5.本地语言 -->

<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">

//弹出对话框

$(function(){

	//alert("前面的对话框,阻塞代码运行");

	/*$.messager.alert("警告小付","说话注意点！非阻塞式对话框","warning",

			function(){

		//回调函数，当窗口点击确定被关闭时触发

		alert("回调函数被触发");

	});*/

	//alert("后面的对话框");

	$("#bt1").click(

		function(){

			//弹出确认对话框

			$.messager.confirm("确认","小付确实是王八蛋吗？",

				function(r){

					if(r)

						{

							alert("确定删除王八蛋");

						}

					else

						{

						alert("取消删除王八蛋");

						}

				}

			);

		}		

	);

	//输入对话框

	$("#bt2").click(

		function(){

			$.messager.prompt("输入框","请输入姓名",

				function(val){

					if(val)

						{

						alert("姓名是"+val);

						}

				}

			);

		}

	);

	//进度对话框

	$("#bt3").click(

		function(){

			$.messager.progress(

				{

					title:"进度条",

					msg:"能量加载中。。。",

					text:"请稍后。。。",

					interval:1000

				}		

			);

		}

	);

	//气泡式

	$("#bt4").click(

		function(){

			$.messager.show(

				{

					title:"消息",

					msg:"消息内容",

					//showType:"fade",

					showSpeed:600,

					width:400,

					height:200,

					timeout:5000

				}

			);

		}

	);

	//打开窗口

	$("#bt5").click(

		function(){

			//调用窗口的方法

			$("#win1").window("open");

		}

	);

	//关闭敞口

	$("#bt6").click(

		function(){

			$("#win1").window("close");

		}

	);

	//新建窗口

	$("#bt7").click(

		function(){

			//新建窗口

			$("#win2").window(

					{

						width:400,

						height:200,

						title:"窗口标题",

						iconCls:"icon-save",

						content:"新建窗口的内容：窗前明月光，"

					}

			);

		}

	);

	//调整窗口大小

	$("#bt8").click(

		function(){

			$("#win1").window("resize",

				{

					width:600,

					height:400

				}		

			);

		}

	);

	//构造添加按钮

	$("#lb2").linkbutton(

			{

				text:"添加",

				iconCls:"icon-add",

				width:80

			}

	);

	$("#lb1").click(

		function(){

			alert("按钮被点击");

		}

	);

	//打开窗口2

}

)

</script>

</head>

<body>

<button id="bt1">删除</button>

<br>

<button id="bt2">输入</button>

<br>

<button id="bt3">进度条</button>

<br>

<button id="bt4">气泡式</button>

<br><br>

<div id="win1" class="easyui-window" title="窗口1" style="width:400px;height: 200px"

data-options="collapsible:true,

closed:true,

modal:false">

黑暗凝聚灵魂，堕落方能自由。

</div>

<button id="bt5">打开窗口</button>

<br>

<button id="bt6">关闭窗口</button>

<br>

<button id="bt7">新建窗口</button><br>

<br>

<button id="bt8">调整窗口大小</button><br>

<div id="win2"></div>

<br>

<a id="lb1" href="#" class="easyui-linkbutton" style="width:80px"

data-options="iconCls:'icon-search',disabled:true">搜索</a>

<a id="lb2" href="#"></a>

<br>

<div id="dl1" class="easyui-dialog" title="窗口"

style="width:400px;height: 200px"

data-options="

toolbar:[

			{

			text:'添加',

			iconCls:'icon-add',

			handler:function(){alert('点击了添加按钮')}

			},{

				text:'保存',iconCls:'icon-save'

			}

	],

	buttons:[

	{text:'确定'},{text:'取消',handler:function(){$('#dl1').dialog('close')}}

	]">

显示对话窗口

</div>

<br>

<br>

</body>

</html>

　　

EasyUI组件（窗口组件）的更多相关文章

  1. 4.EasyUI学习总结(四)——EasyUI组件使用 (通过用户登录来演示dialog、ajax的使用，serialize方法的使用，前后台怎样交互等)

    一.EasyUI组件的简单介绍 详细可看api: http://www.jeasyuicn.com/api/docTtml/index.htm easyUI提供了很多组件让我们使用,如下图所示: 很多 ...

  2. EasyUI学习总结(五)——EasyUI组件使用

    一.EasyUI组件的简单介绍 easyUI提供了很多组件让我们使用,如下图所示:

  3. EasyUI学习总结(五)——EasyUI组件使用（转载）

    本文转载自:http://www.cnblogs.com/xdp-gacl/p/4084520.html 一.EasyUI组件的简单介绍 easyUI提供了很多组件让我们使用,如下图所示:

  4. 为Jquery EasyUI 组件加上“清除”功能

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或 ...

  5. easyui组件window拖动时超过浏览器顶部则无法拖回

    项目研发过程中遇到一个问题,easyui的window可以随意拖动或者放大缩小,但是鼠标只有放在“header”上面时鼠标箭头才会变成四个方向的箭头,也就是只有在这时才能拖动窗口:但是当拖动的窗口超过 ...

  6. 去哪网实习总结：用到的easyui组件总结（JavaWeb）

    本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发... 只是还是比較认真的做了三个月,老师非常认同我的工作态度和成果.. . 实习立即就要结束了,总结一下几点之前没有注意过的变成习惯和问题,分享 ...

  7. easyui formatter 返回easyui组件

    <table id="dg2" title="标题" style="width:400px;float: left;"> < ...

  8. Spring boot+Thymeleaf+easyui集成：js创建组件页面报错

    开发工具:Ideal 使用场景:Demo 前提:       环境:Spring boot +Thymeleaf+easyui 引入thymeleaf模板引擎 <html lang=" ...

  9. easyui基于 layui.laydate日期扩展组件

    本人后端开发码农一个,公司前端忙的一逼,项目使用的是easyui组件,其自带的datebox组件使用起来非常不爽,主要表现在 1.自定义显示格式很麻烦 2.选择年份和月份用户体验也不好 网上有关于和M ...

随机推荐

  1. 介绍n款计算机视觉库/人脸识别开源库/软件

    计算机视觉库 OpenCV OpenCV是Intel®开源计算机视觉库.它由一系列 C 函数和少量 C++ 类构成,实现了图像处理和计算机视觉方面的很多通用算法. OpenCV 拥有包括 300 多个 ...

  2. javascript中时间的手动创建date的方式

    new Date("month dd,yyyy hh:mm:ss"); new Date("month dd,yyyy"); new Date(yyyy,mth ...

  3. RDS MySQL 全文检索相关问题的处理

    RDS MySQL 全文检索相关问题 1. RDS MySQL 对全文检索的支持 2. RDS MySQL 全文检索相关参数 3. RDS MySQL 全文检索中文支持 3.1 MyISAM 引擎表 ...

  4. UML 之 四种关系

    学习过UML的人都知道,UML之中有九种图和四种关系,今天,我们先来介绍一下这四种关系: 对于我们这些初学者来说,UML之中无非是  关联.依赖.泛化和实现,但是其中,关联和依赖又如何区分?泛化又如何 ...

  5. OGNL表示式使用和值栈

    另外值得参考博客:http://blog.csdn.net/resigshy/article/details/7560573 OGNL是Object Graphic Navigation Langua ...

  6. 在CentOS中快速安装PHP，MySQL，Nginx和phpMyAdmin

    安装环境 yum install -y autoconf automake gcc gcc-c++ git libtool make nasm pkgconfig zlib-devel vim 安装p ...

  7. hdu1160 LIS变形

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1160 题意:两个子序列 一个是升序,一个是降序,求最长的子序列是多长,并输出路径.(答案不 ...

  8. css -- 导航条

    1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a>&l ...

  9. 泛型容器单元(Generics.Collections)[3]: TStack<T> 堆栈列表

    TQueue 和 TStack, 一个是队列列表, 一个是堆栈列表; 一个是先进先出, 一个是先进后出. TStack 主要有三个方法.一个属性:Push(压栈).Pop(出栈).Peek(查看下一个 ...

  10. delphi 时间格式操作

    FormatDateTime('yyyy-mm-dd hh:nn:ss',Now) FormatDateTime('hh:mm:ss:zz',Now) if (TimeOf(now) < pub ...