项目里要用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. 转:设置Eclipse中的tab键为4个空格的完整方法

    from: https://my.oschina.net/xunxun10/blog/110074   设置Eclipse中的tab键为4个空格的完整方法 收藏 XunXun10 发表于 4年前 阅读 ...

  2. poj[1185]炮兵阵地

    Description 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用"H" 表示),也可能是平原(用&quo ...

  3. oracle round 函数,replace()函数

    (1)如何使用 Oracle Round 函数 (四舍五入)描述 : 传回一个数值,该数值是按照指定的小数位元数进行四舍五入运算的结果.SELECT ROUND( number, [ decimal_ ...

  4. koala编译scss文件时不支持中文字体的解决方案

    第一种方案:在scss文件第一行加上这行代码@charset "utf-8"; 第二种方案: scss文件编译时候使用ruby环境,出现 Syntax error: Invalid ...

  5. DEDECMS之七 如何实现文章推荐排行榜

    经常可以看到各种排行榜,这些文章列表的标题之前加了序号,前三条还有显眼样式 1.实现效果 2.实现方法 <ul class="hotPh1"> {dede:arclis ...

  6. .net RPC框架选型

    近期开始研究分布式架构,会涉及到一个最核心的组件:RPC(Remote Procedure Call Protocol).这个东西的稳定性与性能,直接决定了分布式架构系统的好坏.RPC技术,我们的产品 ...

  7. favicon.ico文件简介

    本地调试时,控制台经常会打印如下的错误(对 favicon.ico 的请求在 chrome 调试面板下不可见,可在抓包工具,比如 Fiddler 中看到): favicon.ico 是啥?看下面这张图 ...

  8. 必须要会的技能(一) 如何实现设计时Binding

    今天我们来分享一个主题:DesignTime Binding设计时绑定. 这一项技术可以使用在所有包括WPF及其衍生出来的技术上,比如Sliverlight,当然也包括UWP 先来说明一下设计时Bin ...

  9. Adobe Reader & PDF 护眼设置

    1.首先选择“编辑”--->“首选项” 选择其他颜色,把RGB如下设置

  10. P值与significant(显著性)的理解

    P值与significant的理解 来源:广州市统计局   发表日期:2015-01-21     P值可以理解为结论的风险大小,也就是根据数据得出的结果有多大的错误风险,P值越小,结论错误的风险越小 ...