• 【转】扩展easyUI tab控件,添加加载遮罩效果


    在easyui下自己生成遮罩效果的方法
     

     
    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",  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")

    效果图:

  • 相关阅读:
    第12组 Alpha冲刺(4/6)
    第12组 Alpha冲刺(3/6)
    第12组 Alpha冲刺(2/6)
    2019软件工程实践——第四次作业
    2019软件工程实践——第三次作业
    2019软件工程实践——第二次作业
    2019软件工程实践——第一次作业
    博客园 自定义背景图片(包括动图)
    软件工程 实验一 GIT代码版本管理
    WordCounter项目(基于javase)
  • 原文地址:https://www.cnblogs.com/hongyan5682/p/5544194.html
Copyright © 2020-2023  润新知