项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程。tab控件又没有显示遮罩的设置(至少本菜是没有找到),

Google了一下,根据另一个兄台写的方法,拿来改造了一下,效果不错。拿来分享

原文地址:jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码

修改后的代码:

  1. (function () {
  2. $.extend($.fn.tabs.methods, {
  3. //显示遮罩
  4. loading: function (jq, msg) {
  5. return jq.each(function () {
  6. var panel = $(this).tabs("getSelected");
  7. if (msg == undefined) {
  8. msg = "正在加载数据,请稍候...";
  9. }
  10. $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: panel.width(), height: panel.height() }).appendTo(panel);
  11. $("<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 });
  12. });
  13. }
  14. ,
  15. //隐藏遮罩
  16. loaded: function (jq) {
  17. return jq.each(function () {
  18. var panel = $(this).tabs("getSelected");
  19. panel.find("div.datagrid-mask-msg").remove();
  20. panel.find("div.datagrid-mask").remove();
  21. });
  22. }
  23. });
  24. })(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控件,添加加载遮罩效果的更多相关文章

  1. easyui控件的加载顺序

    使用easyui做布局时,会模仿窗口程序界面,做出一些较复杂的布局.按由外层到内层的顺序: (最外层)panel->tabs->tabs1 ->tabs2->layout-&g ...

  2. Delphi7 第三方控件1stClass4000的TfcImageBtn按钮控件动态加载jpg图片例子

    Delphi7 第三方控件1stClass4000的TfcImageBtn按钮控件动态加载jpg图片例子 procedure TForm1.Button1Click(Sender: TObject); ...

  3. 重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图

    原文:重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 Web ...

  4. 使用DevExpress.XtraTabbedMdi.XtraTabbedMdiManager控件来加载MDI窗体

    使用DevExpress.XtraTabbedMdi.XtraTabbedMdiManager控件来加载MDI窗体     [csharp] view plaincopyprint? <SPAN ...

  5. WPF 修改屏幕DPI,会触发控件重新加载Unload/Load

    修改屏幕DPI,会触发控件的Unloaded/Loaded 现象/重现案例 对Unloaded/Loaded的印象: FrameworkElement, 第一次加载显示时,会触发Loaded.元素被释 ...

  6. Asp.net 的DropDownList 控件动态加载

    在做连接数据库表,在页面上用DropDownList 下拉框查询某条数据时,因为数据库里的数据,随时都有可能增加或减少,而下拉框关联的某个字段的值并不一定是固定的. 表信息: CREATE TABLE ...

  7. 在WinForm应用程序中,使用选项卡控件来加载不同的Form界面!

    TabPage tp=new TabPage(); your选项卡控件.Controls.Add(tp); From1 frm=new Form1(); frm.TopLevel = false; f ...

  8. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  9. Android给控件添加默认点击效果

    Android控件点击效果 Android中Button控件是有点击效果的,但是像TextView.ImageView.各种Layout是没有点击效果的,给TextView设置点击事件后,加个点击效果 ...

随机推荐

  1. Js倒计时程序

    Js倒计时程序 点击下载

  2. Centos5.8 安装 Redmine

    安装Ruby 到 /opt/ruby-2.0.0 -p481.tar.gz cd ruby--p481 ./configure --prefix=/opt/ruby- sudo make sudo m ...

  3. PAT 1018. 锤子剪刀布 (20)

    现给出两人的交锋记录,请统计双方的胜.平.负次数,并且给出双方分别出什么手势的胜算最大. 输入格式: 输入第1行给出正整数N(<=105),即双方交锋的次数.随后N行,每行给出一次交锋的信息,即 ...

  4. php 正则匹配中文(转)

    我使用正则表达式来匹配中问的时候,出现了无法匹配的问题,问题如下 PCRE does not support \L, \l, \N{name}, \U, or \u at offset 2 我原来的匹 ...

  5. HTML5商城开发三 jquery 星星评分插件

    展示:

  6. codevs2693 上学路线(施工)

    难度等级:黄金 2693 上学路线(施工) 题目描述 Description 问题描述 你所在的城市街道好像一个棋盘,有a条南北方向的街道和b条东西方向的街道. 南北方向a条街道从西到东依次编号为1到 ...

  7. web一周

      学习web有一周了,老师进度有点小快,但是我还是感觉挺不错的.   对于一开始什么都不认识到能看懂是什么意思,并且可以写一些内容,我感觉还是比较欣慰,老师还是比较负责的,我每次都去找更远的代码学习 ...

  8. HFSS学习

    关于边界条件和端口激励的设置,是HFSS应用和学习的重点和难点:“边界条件决定场”,正确地理解和使用边界条件是正确使用HFSS仿真分析电磁问题的前提:HFSS中定义了多种边界条件,大家在学习过程中必须 ...

  9. lecture13-BP算法的讨论和置信网

    这是HInton课程第13课,这一课有两篇论文可以作为课外读物<Connectionist learning of belief networks>和<The wake-sleep ...

  10. .NET程序迁移到Mysql的极简方案——让GGTalk同时支持Sqlserver与mysql全程记录!

    园子里的这个GGTalk,咱们前前后后用它移花接木做的IM项目也不下三四个了.初次入手的时候,洋洋代码,多少感觉有些难以把握.不过一来二去,理清了头绪,也就一览无余了.相信跟我们一样想要利用GGTal ...