`

扩展easyUI tab控件,添加加载遮罩效果

阅读更多
(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);  


显示遮罩:$("#tabID").tabs("loading",msg) msg--要显示的信息

隐藏遮罩:$("#tabID").tabs("loaded")
分享到:
评论

相关推荐

    扩展EasyUI tabs 组件,加载tab页时添加遮罩

    标题"扩展EasyUI tabs 组件,加载tab页时添加遮罩"指出了我们将在EasyUI的tabs组件上进行自定义,以便在新tab页内容加载期间显示一个遮罩层。遮罩层是一种常见的视觉提示,用于告知用户页面正在处理数据或加载内容,...

    easyui iframe 页面重复加载的问题

    在使用easyui框架开发Web应用时,特别是在使用tab布局的时候,开发者可能会遇到页面内容被放置在iframe中时,页面多次加载的问题。这种情况尤其会在使用easyui的tab布局时发生,因为easyui会默认加载所有tab的内容,...

    easyUI时间控件使用

    在本文中,我们将深入探讨如何在EasyUI框架中有效地使用时间控件,以及如何解决时间格式化的问题。EasyUI是一个基于jQuery的轻量级前端开发框架,它提供了一系列丰富的组件,帮助开发者快速构建用户界面。时间控件是...

    easyui 日期控件选择到月份

    easyui日期控件只选择到月份,保存记录一下。 &lt;input id="month" class="easyui-datetimebox" name="month" data-options="required:true,formatter:myformatter,parser:myParser" 160px" /&gt;

    easyui 各种控件的例子

    EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了丰富的组件和控件,使得开发者可以快速构建出美观且功能齐全的Web应用界面。在这个名为 "easyui 各种控件的例子" 的压缩包中,你将找到一系列预构建的页面,...

    easyui tab

    EasyUI是一个轻量级的前端开发框架,集合了众多实用的组件,如表格、对话框、菜单、树形控件等,而Tab则是其中的一个核心组件,用于组织和展示页面上的多个内容区域。 在EasyUI中,Tab的使用非常直观,只需通过HTML...

    EasyUI常用控件使用案例

    在本文中,我们将深入探讨EasyUI控件的使用,特别是在SSH框架下的JavaWeb项目中的应用。EasyUI是一个基于jQuery的轻量级UI库,它提供了一系列丰富的组件,使得开发者能够快速构建用户界面。SSH框架(Struts2、Spring...

    扩展easyui.datagrid,添加数据loading遮罩效果代码

    在使用的过程中,发现easyui目前还缺少一些小功能或是未开放出来 拿datagrid插件来说,数据加载提供了两...分析easyui的datagrid代码,削离出其中远程数据加载时遮罩显示代码,并扩展datagrid的方法,代码如下: 代码如

    用Avalonia实现的EasyUI控件

    用Avalonia实现的EasyUI控件;用Avalonia实现的EasyUI控件;用Avalonia实现的EasyUI控件;用Avalonia实现的EasyUI控件;用Avalonia实现的EasyUI控件;用Avalonia实现的EasyUI控件;用Avalonia实现的EasyUI控件;用...

    JS EasyUI DataGrid动态加载数据

    4. **自定义加载更多功能**: 如果需要自定义加载更多数据的行为,例如添加一个“加载更多”按钮,可以在按钮的点击事件中调用DataGrid的`reload`方法,传递新的页码和每页大小。 ```html ()"&gt;加载更多 function ...

    Easyui添加Tab右键菜单

    在本示例中,我们将关注如何在EasyUI的Tab组件上添加右键菜单,实现包括刷新、关闭、全部关闭、关闭左侧和关闭右侧等操作。 首先,我们需要理解EasyUI的Tab组件。Tab组件是EasyUI中的一个核心组件,用于展示多个...

    遮罩easyui

    尽管许多 EasyUI 控件自带遮罩功能,但在实际开发过程中,经常会遇到一些特殊情况,需要自定义遮罩效果: 1. **某些控件缺乏遮罩属性** - 例如,Tabs 组件并没有内置遮罩功能。 - 解决方案:可以通过 jQuery 或...

    EasyUi修改验证控件

    然而,有时默认的验证控件可能无法满足所有需求,这时我们需要对其进行自定义和扩展。 在标题和描述中提到的问题,主要是关于 EasyUI validatebox 的两个方面: 1. **验证时机**:原始的 validatebox 控件会在获取...

    EasyUI控件

    EasyUI的树形控件支持动态加载、可展开/折叠节点、拖放操作等功能,为用户提供了直观的交互体验。 在压缩包"easyui"中,可能包含了EasyUI的以下内容: 1. CSS文件:这些文件定义了EasyUI控件的样式,包括基础样式...

    解决easyui datagrid控件的日期显示问题1

    在使用EasyUI的datagrid控件时,我们常常会遇到日期数据在前端显示为`object`类型的问题,这主要是因为服务器返回的日期数据没有被正确格式化。在标题和描述中提到的解决方案,主要涉及到以下几个关键点: 1. **...

    Easyui 树形控件展示

    综上所述,EasyUI 树形控件是构建交互式前端应用的重要工具,它的易用性和灵活性使其在多种场景下都能发挥出色的效果。通过熟练掌握和运用这些知识点,开发者可以轻松创建出具有专业级别的树形视图。

    如何解决jQuery EasyUI 已打开Tab重新加载问题

    本文将详细介绍如何解决jQuery EasyUI中已打开Tab的重新加载问题。 首先,我们需要理解`tabs`组件的一些基本操作。`tabs('exists', subtitle)`方法用于检查是否存在指定标题的Tab,如果不存在,则创建新的Tab。`...

    JQueryUI,EasyUI一些控件的使用

    在本文中,我们将深入探讨JQueryUI和EasyUI这两个JavaScript库在创建用户界面时的一些关键控件和功能,包括表单、Tab切换以及样式切换。它们都是为了提升Web应用程序的用户体验和交互性而设计的。 首先,让我们了解...

    easyui layout+tab+tree实现网站基本布局

    EasyUI的tree组件支持多种操作,如展开/折叠节点、选择节点、异步加载数据等。创建tree时,我们需要提供JSON格式的数据源,这些数据描述了树的结构。然后,在HTML中定义tree容器,并使用JavaScript初始化tree,设置...

Global site tag (gtag.js) - Google Analytics