注意首先要在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. linux脚本编程技术

    linux脚本编程技术 一.什么是脚本 脚本是一个包含一系列命令序列的可执行(777)文本文件.当运行这个脚本文件时,文件中包含的命令序列将得到自动执行. 二.脚本编程 #!/bin/sh 首行固定格 ...

  2. Android屏幕适配全攻略（最权威的官方适配指导） (转)

    招聘信息: Cocos2d-X 前端主程 [新浪微博]手机客户端iOS研发工程师 20k-40k iOS 开发工程师 iOS高级开发工程师(中国排名第一的企业级移动互联网云计算公司 和创科技 红圈营销 ...

  3. ontouchstart

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  4. Android 蹲坑的疑难杂症集锦一

    各位看官老爷子你们好,我就是那个挖坑不埋,还喜欢开新矿的小喵同志. 问大家一个问题,在Github上找项目的时候,看到中文简介说明你们是不是觉得这个项目很low不屑一顾? 最近朋友无意中说,在Gith ...

  5. Memcached集群代理软件magent安装小结

    magent是一个memcached代理软件(memcached agent),又叫memagent. (magent is a simple but useful proxy program for ...

  6. java的重载、覆盖和隐藏的区别

    重载:方法名相同,但参数不同的多个同名函数 注意:1.参数不同的意思是参数类型.参数个数.参数顺序至少有一个不同 2.返回值和异常以及访问修饰符,不能作为重载的条件(因为对于匿名调用,会出现歧义,eg ...

  7. hdu1087 最大递增子段和

    http://acm.split.hdu.edu.cn/showproblem.php?pid=1087 状态方程:sum[j]=max{sum[i]}+a[j]; 其中,0<=i<=j, ...

  8. Xamarin Android教程Android基本知识版本介绍与系统介绍

    Xamarin Android教程Android基本知识版本介绍与系统介绍 Xamarin Android教程Android基本知识版本介绍与系统介绍,开发Andriod有时候不像iOS一样轻松,因为 ...

  9. 06_Java多线程、线程间通信

    1. 线程的概念      1.1多进程与多线程 进程:一个正在执行的程序.每个进程执行都有一个执行顺序,该顺序是一个执行路径,或叫一个控制单元. 一个进程至少有一个线程. 线程:就是进程中的一个独立 ...

  10. 如何用distinct消除重复记录的同时又能选取多个字段值？

    http://www.cnblogs.com/warioland/archive/2012/05/30/2526128.html