扩展easyUI tab控件,添加加载遮罩效果
项目里要用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(){})(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控件的加载顺序
使用easyui做布局时,会模仿窗口程序界面,做出一些较复杂的布局.按由外层到内层的顺序: (最外层)panel->tabs->tabs1 ->tabs2->layout-&g ...
- Delphi7 第三方控件1stClass4000的TfcImageBtn按钮控件动态加载jpg图片例子
Delphi7 第三方控件1stClass4000的TfcImageBtn按钮控件动态加载jpg图片例子 procedure TForm1.Button1Click(Sender: TObject); ...
- 重新想象 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 ...
- 使用DevExpress.XtraTabbedMdi.XtraTabbedMdiManager控件来加载MDI窗体
使用DevExpress.XtraTabbedMdi.XtraTabbedMdiManager控件来加载MDI窗体 [csharp] view plaincopyprint? <SPAN ...
- WPF 修改屏幕DPI,会触发控件重新加载Unload/Load
修改屏幕DPI,会触发控件的Unloaded/Loaded 现象/重现案例 对Unloaded/Loaded的印象: FrameworkElement, 第一次加载显示时,会触发Loaded.元素被释 ...
- Asp.net 的DropDownList 控件动态加载
在做连接数据库表,在页面上用DropDownList 下拉框查询某条数据时,因为数据库里的数据,随时都有可能增加或减少,而下拉框关联的某个字段的值并不一定是固定的. 表信息: CREATE TABLE ...
- 在WinForm应用程序中,使用选项卡控件来加载不同的Form界面!
TabPage tp=new TabPage(); your选项卡控件.Controls.Add(tp); From1 frm=new Form1(); frm.TopLevel = false; f ...
- jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- Android给控件添加默认点击效果
Android控件点击效果 Android中Button控件是有点击效果的,但是像TextView.ImageView.各种Layout是没有点击效果的,给TextView设置点击事件后,加个点击效果 ...
随机推荐
- Js倒计时程序
Js倒计时程序 点击下载
- Centos5.8 安装 Redmine
安装Ruby 到 /opt/ruby-2.0.0 -p481.tar.gz cd ruby--p481 ./configure --prefix=/opt/ruby- sudo make sudo m ...
- PAT 1018. 锤子剪刀布 (20)
现给出两人的交锋记录,请统计双方的胜.平.负次数,并且给出双方分别出什么手势的胜算最大. 输入格式: 输入第1行给出正整数N(<=105),即双方交锋的次数.随后N行,每行给出一次交锋的信息,即 ...
- php 正则匹配中文(转)
我使用正则表达式来匹配中问的时候,出现了无法匹配的问题,问题如下 PCRE does not support \L, \l, \N{name}, \U, or \u at offset 2 我原来的匹 ...
- HTML5商城开发三 jquery 星星评分插件
展示:
- codevs2693 上学路线(施工)
难度等级:黄金 2693 上学路线(施工) 题目描述 Description 问题描述 你所在的城市街道好像一个棋盘,有a条南北方向的街道和b条东西方向的街道. 南北方向a条街道从西到东依次编号为1到 ...
- web一周
学习web有一周了,老师进度有点小快,但是我还是感觉挺不错的. 对于一开始什么都不认识到能看懂是什么意思,并且可以写一些内容,我感觉还是比较欣慰,老师还是比较负责的,我每次都去找更远的代码学习 ...
- HFSS学习
关于边界条件和端口激励的设置,是HFSS应用和学习的重点和难点:“边界条件决定场”,正确地理解和使用边界条件是正确使用HFSS仿真分析电磁问题的前提:HFSS中定义了多种边界条件,大家在学习过程中必须 ...
- lecture13-BP算法的讨论和置信网
这是HInton课程第13课,这一课有两篇论文可以作为课外读物<Connectionist learning of belief networks>和<The wake-sleep ...
- .NET程序迁移到Mysql的极简方案——让GGTalk同时支持Sqlserver与mysql全程记录!
园子里的这个GGTalk,咱们前前后后用它移花接木做的IM项目也不下三四个了.初次入手的时候,洋洋代码,多少感觉有些难以把握.不过一来二去,理清了头绪,也就一览无余了.相信跟我们一样想要利用GGTal ...