注意首先要在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. asp中 grideview 更新 无法获取值 解决办法

    string str1 = ((TextBox)(GridView1.Rows[e.RowIndex].Cells[7].Controls[0])).Text.ToString().Trim(); 来 ...

  2. AOP动态代理解析4-jdk代理的实现

    JDKProxy的使用关键是创建自定义的InvocationHandler,而InvocationHandler中包含了需要覆盖的函数getProxy,而当前的方法正是完成了这个操作.在此确认一下JD ...

  3. CSS3属性

    1.边框阴影(box-shadow ): 投影方式,X轴偏移,Y轴偏移,阴影模糊半径,阴影扩展半径,颜色 2.边框图像(border-image) 3.边框圆角:border-radius:5px 4 ...

  4. PHP学习笔记（一）

    by Alina.Xia, dated on 2016.11.27 一.MyAql数据库PHP在开发web站点或管理一些系统时,需要对大量的数据进行保存.XML文件和文本文件虽然可以作为数据的整体,但 ...

  5. PHP 采集

    <?php header("content-type:text/html;charset=gbk"); // 要采集的页面的地址 $url = "http://ww ...

  6. 20145223 《Java程序程序设计》实验报告4

    20145223杨梦云Java实验四<Andoid开发基础> 实验内容 安装Android Studio 运行安卓AVD模拟器 使用Android运行出模拟手机并显示自己的学号 实验步骤 ...

  7. 用脚本完成mysql工作

    1. 用mysql -e在脚本中执行mysql的sql语句 #!/bin/bash #simple mysql shell usage logtime=`date "+%Y-%m-%d&qu ...

  8. shell中命令之间数据的传递

    1.管道 "|" ls | cat -n > out.txt 2. 子shell 2.1 子shell 说明 在shell脚本中可以用()操作符可以定义一个子shell #/ ...

  9. 持续集成基础-Jenkins(二)-搭建Jenkins环境和配置第一个Job

    安装方式一(直接启动): 1.下载最新的版本(一个 WAR 文件).Jenkins官方网址: http://Jenkins-ci.org/ 2.运行 java -jar jenkins.war(需要运 ...

  10. 持续集成基础-Jenkins(一)

    什么是jenkins: Jenkins是持续集成的一个系统,它是一种软件开发实践活动(经常执行集成,可能每天) 持续集成的价值: 1.减少风险 - 能够尽早的发生问题 2.减少重复过程 - 把重复的东 ...