Easy UI 遮罩(MASK)
2013-11-27 14:03
274 查看
Easy UI 的各类控件有些带了遮罩功能,如 DataGrid,可以这样使用:
//显示遮罩
$("#dg").datagrid("loading", "数据加载中……");
//隐藏遮罩
$("#dg").datagrid("loaded");
在有些情况下,我们不能直接使用控件本身的遮罩效果,比如:
1:有些控件则没有这样的属性,比如 Tabs;
2:页面初始加载时;
3:通过 Ajax 异步获取数据并刷新当前页面;
这个时候,就要采用另外的办法来进行遮罩。有一个方案是,使用:
//开启遮罩
$.messager.progress({
title: 'Please waiting',
msg: 'Loading data...',
text: 'PROCESSING.......'
});
//关闭遮罩
$.messager.progress('close');
效果如下:
![](http://images.cnitblog.com/blog/123061/201308/30122636-5c4c40792721420dbccad6bd5b5d7e65.png)
注意,三个属性不是必选的。属性 title 和 msg 如果不设置,则画面中 1 和 2 不显示,属性 text 不设置,则 3 处显示的一个自动变化的百分比。
以下是一个示例:
var step1Ok = function () {
$.messager.progress({
title: 'Please waiting',
msg: 'Loading data...',
text: 'PROCESSING.......'
});
$.ajax({
type: "GET",
url: "@ViewBag.Domain/Paper/GetQuestionUnit",
success: function (data) {
$.messager.progress('close');
alert(data);
}
});
};
//显示遮罩
$("#dg").datagrid("loading", "数据加载中……");
//隐藏遮罩
$("#dg").datagrid("loaded");
在有些情况下,我们不能直接使用控件本身的遮罩效果,比如:
1:有些控件则没有这样的属性,比如 Tabs;
2:页面初始加载时;
3:通过 Ajax 异步获取数据并刷新当前页面;
这个时候,就要采用另外的办法来进行遮罩。有一个方案是,使用:
//开启遮罩
$.messager.progress({
title: 'Please waiting',
msg: 'Loading data...',
text: 'PROCESSING.......'
});
//关闭遮罩
$.messager.progress('close');
效果如下:
![](http://images.cnitblog.com/blog/123061/201308/30122636-5c4c40792721420dbccad6bd5b5d7e65.png)
注意,三个属性不是必选的。属性 title 和 msg 如果不设置,则画面中 1 和 2 不显示,属性 text 不设置,则 3 处显示的一个自动变化的百分比。
以下是一个示例:
var step1Ok = function () {
$.messager.progress({
title: 'Please waiting',
msg: 'Loading data...',
text: 'PROCESSING.......'
});
$.ajax({
type: "GET",
url: "@ViewBag.Domain/Paper/GetQuestionUnit",
success: function (data) {
$.messager.progress('close');
alert(data);
}
});
};
相关文章推荐
- 玩转Web之easyui(一)-----easy ui datagird 分页
- JQuery easy UI updateRow
- 7个jquery easy ui 基本组件图解
- Easy ui DataGrid 列文字多串行问题解决方案
- easy-ui之datagrid 单元格样式设置
- Jquery easy ui dataGrid
- CSS3 mask 遮罩蒙版效果
- jQuery Easy UI Droppable(放置)组件
- <Unity UGUI><EasyTouch> 使用EasyTouch, 摇杆在Dynamic模式下,点击UI控件也会弹出的问题解决
- jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
- easy_ui之窗口的实例
- JQuery Easy Ui dataGrid 数据表格 此文章解决easy ui 足矣
- jQuery Easy UI LinkButton(button)包
- 新手遇到的问题:Easy UI的对话框老是在页面加载完成后自动弹出
- 使用Jquery Easy UI要导入的js顺序
- 画地为Mask,随心所欲的高效遮罩组件[Unity]
- easy-ui 使用datagrid问题记录
- easy-ui使用指南
- jquery easy ui datagrid 全选、反选、清除
- WPF loading遮罩层 LoadingMask