扩展easyUI tab控件,添加加载遮罩效果
来源:互联网 发布:徐老师的淘宝店网址 编辑:程序博客网 时间:2024/05/22 04:40
源文地址:http://blog.csdn.net/littlewolf766/article/details/7331973
项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程。tab控件又没有显示遮罩的设置(至少本菜是没有找到),Google了一下,根据另一个兄台写的方法,拿来改造了一下,效果不错。拿来分享原文地址:jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码修改后的代码:[javascript] view plaincopyprint?(function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs("getSelected"); if (msg == undefined) { msg = "正在加载数据,请稍候..."; } $("
").css({ display: "block", width: panel.width(), height: panel.height() }).appendTo(panel); $("").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 () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs("getSelected"); if (msg == undefined) { msg = "正在加载数据,请稍候..."; } $("").css({ display: "block", width: panel.width(), height: panel.height() }).appendTo(panel); $("").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 tab控件,添加加载遮罩效果
- 扩展easyUI tab控件添加加载遮罩效果
- 扩展easyui.datagrid,添加数据loading遮罩效果代码
- JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码
- jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码
- EasyUI datagrid添加loading遮罩效果
- easyui 动态添加 tab
- EasyUI 动态添加tab
- Easyui tab panel loading效果
- easyui-tab 加载右键菜单
- easyui为tab添加遮罩层
- EasyUI Tab添加右键菜单
- EasyUI添加tab页签
- Tab控件效果
- Easyui 加载效果
- 动态添加Tab控件
- 添加Tab Control控件
- .net网站中的跨进程调用学习(生产者和消费者模式)
- Js判断图片是否存在
- 回调函数的概念及其使用
- squid,nginx,lighttpd反向代理的区别
- Linux进程通信[2]-互斥锁和条件变量
- 扩展easyUI tab控件,添加加载遮罩效果
- 多线程有几种实现方法,都是什么?同步有几种实现方法,都是什么?
- 连SQL2008提示[DBNETLIB][ConnectionOpen (Invalid Instance()).]无效的连接
- BeginPaint和GetDC有什么区别?(转)
- IOException parsing XML document from class path resource [WebRoot/WEB-INF/applicationContext.xml];
- 计算机图像技术在农业中的应用
- Android animation学习笔记之view/drawable animation
- MapXtreme地图切割算法
- 如何查看数据文件或者Log文件是否增长过?