easyui为tab添加遮罩层
来源:互联网 发布:男生不主动追女生知乎 编辑:程序博客网 时间:2024/05/20 17:08
项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程。tab控件又没有显示遮罩的设置(至少本菜是没有找到),
Google了一下,根据另一个兄台写的方法,拿来改造了一下,效果不错。拿来分享
原文地址:jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码
修改后的代码:
- (function () {
- $.extend($.fn.tabs.methods, {
- //显示遮罩
- loading: function (jq, msg) {
- return jq.each(function () {
- var panel = $(this).tabs("getSelected");
- if (msg == undefined) {
- msg = "正在加载数据,请稍候...";
- }
- $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: panel.width(), height: panel.height() }).appendTo(panel);
- $("<div class=\"datagrid-mask-msg\"></div>").html(msg).appendTo(panel).css({ display: "block", left: (panel.width() - $("div.datagrid-mask-msg", panel).outerWidth()) / 2, top: (panel.height() - $("div.datagrid-mask-msg", panel).outerHeight()) / 2 });
- });
- }
- ,
- //隐藏遮罩
- loaded: function (jq) {
- return jq.each(function () {
- var panel = $(this).tabs("getSelected");
- panel.find("div.datagrid-mask-msg").remove();
- panel.find("div.datagrid-mask").remove();
- });
- }
- });
- })(jQuery);
(function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs("getSelected"); if (msg == undefined) { msg = "正在加载数据,请稍候..."; } $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: panel.width(), height: panel.height() }).appendTo(panel); $("<div class=\"datagrid-mask-msg\"></div>").html(msg).appendTo(panel).css({ display: "block", left: (panel.width() - $("div.datagrid-mask-msg", panel).outerWidth()) / 2, top: (panel.height() - $("div.datagrid-mask-msg", panel).outerHeight()) / 2 }); }); }, //隐藏遮罩 loaded: function (jq) { return jq.each(function () { var panel = $(this).tabs("getSelected"); panel.find("div.datagrid-mask-msg").remove(); panel.find("div.datagrid-mask").remove(); }); } });})(jQuery);
另外对(function(){})(Jquery)的解释:
(function($){...})(jQuery)实际上是匿名函数,function(arg){...}
这就定义了一个匿名函数,参数为arg
而调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:
(function(arg){...})(param)
这就相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这个匿名函数
而(function($){...})(jQuery)则是一样的,之所以只在形参使用$,是为了不与其他库冲突,所以实参用jQuery
var fn = function($){....};
fn(jQuery);
使用方法:
显示遮罩:$("#tabID").tabs("loading",msg) msg--要显示的信息
隐藏遮罩:$("#tabID").tabs("loaded")
效果图:
- easyui为tab添加遮罩层
- easyui 动态添加 tab
- EasyUI 动态添加tab
- 为jQuery-easyui的tab组件添加右键菜单功能
- 为EasyUI 的Tab 标签添加右键菜单(转)
- jQuery easyUI 添加tab并为tab添加右键菜单---每天多学一点
- EasyUI Tab添加右键菜单
- EasyUI添加tab页签
- easyui为页面加载添加遮罩层
- EasyUI 添加tab页(iframe方式)
- EasyUI 添加tab页(iframe方式)
- EasyUI 添加tab页(iframe方式)
- EasyUI添加Tab页时content链接方式
- android 为Tab添加Menu
- 扩展easyUI tab控件,添加加载遮罩效果
- 扩展easyUI tab控件,添加加载遮罩效果
- 扩展easyUI tab控件添加加载遮罩效果
- EasyUI两种动态添加tab Iframe页面的方法
- Tomcat:IOException while loading persisted sessions: java.io.EOFException
- Android之SurfaceView简介(三)
- 规则化和模型选择(Regularization and model selection)
- windows 操作系统——自动关闭计算机
- ORACLE over函数
- easyui为tab添加遮罩层
- VS2010运行速度加快方法
- Android系统的开机画面显示过程分析
- stl基本的框架
- ubuntu12.04 编译android源码4.0.4
- javascript理解
- 随便说说字符集和编码
- php中函数imagestringup显示汉字乱码问题!
- qemu 保存/恢复