jquery easy ui 1.3.4 窗口,对话框,提示框(5)

时间:2024-02-21 20:00:12

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