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});