jquery easy ui 1.3.4 窗口,对话框,提示框（5）

5.1、window(窗口)

窗口我们在程序中会大量的使用，比如我们的添加、编辑都可以使用窗口实现，与winform的程序非常的类似。下面的代码是创建一个基本的窗口

$(function () {

$("#mywin").window({

title: "窗口",

width: 300,

height: 400,

modal:true

});

});

通过上面的代码创建一个名称为“窗口”，高度400宽度300的窗口。当modal属性为true的时候，窗口弹出后在窗体下面的内柔都会被加上一个遮罩，我称这样的窗口为模态窗口

5.1.2、window(窗口)--常用方法及属性

1、打开 使用open方法打开窗口

$('#mywin).window('open');

2、关闭使用close方法关闭窗口

$('#mywin).window("close");

1、draggable:是否拖动

2、resizable：是否允许改变大小

3、shadow：是否显示窗口阴影

4、inline:如果为true则在父控件里面，false则在所有元素上面

窗口在最大化的时候是填充满整个父元素，在最小化的时候则是隐藏窗口。

5.2、对话框(Dialog)

Dialog是一个特殊的window，跟window相比它在顶部跟底部多了一个按钮栏。创建代码如下

$('#mywin').dialog({

title: '对话框',

width: 400,

height: 200,

toolbar: [{

text: "添加",

iconCls: "icon-add"

}],

buttons: [{ text: "保存"}, {

text: "取消" }]

});

5.3、弹出框(messager)

easyui中定义五种弹出框

1、$.messager.show:在屏幕右下角显示一个消息窗口

2、$.messager.alert:显示一个警告窗口

3、$.messager.confirm：显示一个确认窗口，包含'确认'、’取消‘两个按钮

4、$.messager.prompt：显示一个带输入框的消息窗口，包含'确认'、’取消‘两个按钮

5、$.messager.progress:显示一个带进度的消息窗口

5.3.1、$.messager.show

l show是一个比较特殊的弹出窗口，也是比较常用的一个组件，参数说明如下：

l showType：如何显示消息窗口， null,slide(滑动),fade(淡入淡出),show(从右下角向左上角方向弹出来），默认为slide

l showSpeed:消息窗口完成弹出的时间

l width:宽

l height:高

l title:消息窗口标题

l msg:消息窗口显示内容

l style:设置消息宽的样式

l timeout:自动关闭时间，为0则不关闭，默认4秒关闭

5.3.2、alert、confirm、prompt

l alert、confirm、prompt这个三个组件的配置非常相似

l title:消息框标题

l msg:消息框内容

l icon:图标，可选值error,question,info,warning.

l fn:回调函数

三个组件的回调函数参数略微不同，alert没有参数，confirm与prompt都有一个参数。还要一点不同就是confirm与prompt没有icon属性，他们的图标都是固定了的。

$.messager.alert('弹出框', '这里是弹出内容', 'info', function () {alert("点击了") });

$.messager.confirm('确认', '你确认操作吗?', function (r) {

if (r) {alert("确认");}

});

$.messager.progress("bar")

通过上面代码得到了进度条的JQ对象，可以通过JQ的方法按我们的要求操作bar对象

$.messager.progress("close");

调用close方法可以关闭progress进度条消息窗口

5.3.3—progress

progress:带进度消息框，配置信息如下

l title:消息框标题，默认为空

l msg:消息内容,默认为空

l text:显示在进度条里的文字

l interval:进度更新间隔时间，默认300

l 上面是progress的属性，该组件也提供了两个方法

l bar:得到进度条对象

l close:关闭进度条

$.messager.progress({

title: "标题",

msg: "显示内容",

text: "进度条上显示的文字",

interval:300});