注意首先要在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. HTML5头部标签备忘

    DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于html 标签之前,此标签告知浏览器文档使用哪种HTML 或者XHTML 规范. 推荐使用HTML5 推 ...

  2. 简单解释Windows如何使用FS段寄存器

    详见附件 jpg改rar

  3. WebView中实现文件下载功能

      WebView控制调用相应的WEB页面进行展示.当碰到页面有下载链接的时候,点击上去是一点反应都没有的.原来是因为WebView默认没有开启文件下载的功能,如果要实现文件下载的功能,需要设置Web ...

  4. Java和数据库时间格式化格式

    JAVA: yyyy-MM-dd HH-mm-ss(大小HH表示24小时制); SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd&q ...

  5. 新的开始—js客户端onlick无法响应

    第一次写博客,也是为了以后遇到同样的问题时可以找到,onlick无法响应在百度一些都有解释,这只是一个个人记录而已 问题: function change_tp(ProInfo_id, color_i ...

  6. 在CSDN中添加友情连接

    <a bref='http://www......'>友情连接</a><br/> <a bref='http://www......'>友情连接2< ...

  7. poj 1273 最大流

    题目链接:http://poj.org/problem?id=1273 a.EK算法:(Edmond-Karp): 用BFS不断找增广路径,当找不到增广路径时当前流量即为最大流. b.dinic算法: ...

  8. Swift3.0语言教程使用URL字符串

    Swift3.0语言教程使用URL字符串 Swift3.0语言教程使用URL字符串,和路径一样,URL其实也是字符串,我们可以将这些字符串称为URL字符串.本小节将讲解URL字符串的使用. 1.编码 ...

  9. virtual方法和abstract方法

    在C#的学习中,容易混淆virtual方法和abstract方法的使用,现在来讨论一下二者的区别.二者都牵涉到在派生类中与override的配合使用. 一.Virtual方法(虚方法) virtual ...

  10. 转 Delphi中使用FastMM4结合View CPU避免内存泄漏

    http://www.cnblogs.com/kongchao/archive/2009/10/27/1590479.html 核心提示:内存泄漏经常出现在本地代码中,特别是多线程和发生异常的情况下, ...