扩展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设置点击事件后,加个点击效果 ...
随机推荐
- using关键字背后的故事!
using关键字的作用: 1:可以引入命名空间2:可以释放资源 *****不能使用using语句完全替换掉(try-catch-finally)语句(无法进行异常处理) 在出了using语句的{}后, ...
- java内存设置
在上边红色框内加入java内存设置命令: -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m
- [No000020]背单词提不起兴趣怎么办?
- java 27 - 5 反射之 通过反射获取成员方法并使用
类Method:提供关于类或接口上单独某个方法(以及如何访问该方法)的信息. A:获取所有方法 数组 1.getMethods 获取该类包括其父类的公共成员方法 2.getDeclaredMetho ...
- JS中NULL和Undefined的区别
NULL是表示一个”无“的对象,转换成数值为0:undefined是一个“无”的原始值,转为数值为NaN: 当声明的变量还未被初始化时,变量的默认值为undefined: null用来表示尚未存在的对 ...
- bootstrap模态框和select2合用时input无法获取焦点
在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的 tabindex="-1&qu ...
- nginx相关
定时切割nginx日志#!/bin/bash #desc: cut nginx log #this script run at 00:00 LOG_PATH='/usr/local/nginx/log ...
- 投入Html5的怀抱,最近在研究的Egret
html5没有办法不关注,实在太火热了,几年前还不行,如今确是环境较好,typescript语言很好学习,可能基于之前的基础,不到一个星期就基本上差不多了,虽然还有一些小问题,但那都是经验积累下来可以 ...
- 谈谈数据监听observable的实现
一.概述 数据监听实现上就是当数据变化时会通知我们的监听器去更新所有的订阅处理,如: var vm = new Observer({a:{b:{x:1,y:2}}}); vm.watch('a.b.x ...
- C#基础之IEnumerable
1.IEnumerable的作用 在使用Linq查询数据时经常以IEnumerable<T>来作为数据查询返回对象,在使用foreach进行遍历时需要该对象实现IEnumerable接口, ...