项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程。tab控件又没有显示遮罩的设置(至少本菜是没有找到),
....................................................................
原文地址: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 () { $.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")
效果图:
项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程。tab控件又没有显示遮罩的设置(至少本菜是没有找到),
....................................................................
原文地址: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 () { $.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 tab 绝对好用的tab插件
扩展EasyUI tabs 组件,加载tab页时添加遮罩,是页面加载时更加美观,内涵示例.
jQuery EasyUI 1.2.6 解决无法遮罩object对象的问题,在代码第1862行增加iframe对象遮罩object对象。
关闭easyui的tabs释放iframe的内存,
UI的dialogr和easyui中的tab的结合使用,产生类似浏览器中打开标签的效果一样,研究了两天,终于弄明白了,一起研究讨论
遮罩easyui
主要介绍了实例代码讲解jquery easyui动态tab页的相关资料,需要的朋友可以参考下
jQuery EasyUI 实例演示(菜单、TAB等)! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
easyui 增加 loading 遮罩 调用方式 $.messager.wait({ title:"提示",msg: "数据加载中…"});
下面小编就为大家带来一篇为jQuery-easyui的tab组件添加右键菜单功能的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jQuery EasyUI拖动商品添加购物车实例代码,鼠标拖动商品到购物车,自动计算出商品总额。
也就是说解决easyui 左侧tab重新刷新加载问题实现。 实现如下: function addTab(subtitle, url) { if (!$('#tabs').tabs('exists', subtitle)) { $('#tabs').tabs('add', { title : subtitle, content :...
NULL 博文链接:https://cping.iteye.com/blog/2174449
使用easyui创建tabs组件和动态添加 使用easyUI创建一个自动播放的tabs 使用easyUI创建XP风格左侧面板 DataGrid 使用easyUI转换HTML table到datagrid 使用easyUI给datagrid添加pagination 使用easyUI添加...
Easyui tabs 标题居左,文字竖着
easyUI页面datagrid动态列和form字段动态添加;项目开发时用到的,废了不少事,大概总了一下,现在发出来共享给想我一样的要用到的菜鸟们,谢谢
前期的准备工作: 1、下载DEMO源码,并升级为最新版本(jquery 1.7.2,Easyui 1.2.6),直接替换就可以啦,升级easyui 是的要把css js theme 全部替换 2、在首页的HTML代码中:将 代码如下: ”mm” class=”easyui-...