注意首先要在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. java 访问 usb

    java 要访问 usb 设备,通常要自己写c/c++代码,然后再用 java 访问这些组件,以达到控制usb设备的目的.但现在有一个开源组件 libusb 帮我们做好了访问usb设备的封装(包括wi ...

  2. C++异常处理机制几种方法

    一.异常 迄今为止,我们处理程序中的错误一般都是用if语句测试某个表达式,然后处理错误的特定义代码. C++异常机制使用了三个新的关键字  (SEH(结构化异常处理)) try    ──标识可能出现 ...

  3. SQL Server2008函数大全（完整版）

    SQL2008 表达式:是常量.变量.列或函数等与运算符的任意组合. 1. 字符串函数 函数 名称 参数 示例 说明 ascii(字符串表达式) select ascii('abc') 返回 97 返 ...

  4. 【前台 ajax】web项目前台传递数组给后台 两种方式

    项目使用maven    springMVC 有需求 将前台的数组   在ajax中 送给后台 方式1: 前台代码:[注意:ajax中的属性---traditional:true,  ] 如果Post ...

  5. bat

    1.输出系统时间,利用系统时间做文件名 @echo offset filename=%date:~0,4%%date:~5,2%%date:~8,2%%time:~0,2%%time:~3,2%%ti ...

  6. Jmeter之参数化（五）

    Jmeter用函数(__Random)批量添加的用法 首先点击  选项----->函数助手对话框-----> 这个是随机取值的意思 在这边输入取值的范围  然后点生成 即可 例如  从 数 ...

  7. JavaScript权威指南读书笔记

    JavaScript 1.变量 变量是一个表示值的符号,是一个名字,他的本质是值: var x; //----声明一个变量: 值通过等号“=”赋给变量,x = 16; 对象是名/值对的集合,或字符串到 ...

  8. hdu1087 最大递增子段和

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

  9. 我的c++学习(6)默认参数和内联函数

    默认参数 一般情况下,函数调用时实参个数应与形参相同,但为了更方便地使用函数,C++也允许定义具有默认参数的函数,这种函数调用时实参个数可以与形参不相同.“默认参数”指在定义或声明函数时为形参指定默认 ...

  10. HBase 学习笔记

    1. HBase 的特点 1.线性扩展,自动分表 region的自动分裂以及master的balance 增加datanode机器即可增加容量 增加regionserver机器即可增加读写吞吐量 2. ...