easyui tab iframe loading提示

解决方案一(转)、
效果:http://www.easyui.info/easyui/demo/tabs/iframeload.html#

$(function(){
            //$('#tabs').tabs('addEventParam');
        });
        var count = 0;
        function addIframeTab(){
            $('#tabs').tabs('addIframeTab',{
                //tab参数为一对象,其属性同于原生add方法参数
                tab:{
                    title:'iframe'+count++,
                    closable:true,
                    tools:[{
                        iconCls:'icon-mini-refresh',
                        handler:function(e){
                            var title = $(e.target).parent().parent().text();
                            $('#tabs').tabs('updateIframeTab',{'which':title});
                        }
                    }]
                },
                //iframe参数用于设置iframe信息,包含:
                //src[iframe地址],frameBorder[iframe边框,,默认值为0],delay[淡入淡出效果时间]
                //height[iframe高度,默认值为100%],width[iframe宽度,默认值为100%]
                iframe:{src:'http://www.baidu.com'}
            });
            $('#tabs').tabs('addEventParam');
        }

扩展插件:

/**
 * @author {CaoGuangHui}
 */
$.extend($.fn.tabs.methods, {
    /**
     * tabs组件每个tab panel对应的小工具条绑定的事件没有传递事件参数
     * 本函数修正这个问题
     * @param {[type]} jq [description]
     */
    addEventParam: function(jq) {
        return jq.each(function() {
            var that = this;
            var headers = $(this).find('>div.tabs-header>div.tabs-wrap>ul.tabs>li');
            headers.each(function(i) {
                var tools = $(that).tabs('getTab', i).panel('options').tools;
                if (typeof tools != "string") {
                    $(this).find('>span.tabs-p-tool a').each(function(j) {
                        $(this).unbind('click').bind("click", {
                            handler: tools[j].handler
                        }, function(e) {
                            if ($(this).parents("li").hasClass("tabs-disabled")) {
                                return;
                            }
                            e.data.handler.call(this, e);
                        });
                    });
                }
            })
        });
    },
    /**
     * 加载iframe内容
     * @param  {jq Object} jq     [description]
     * @param  {Object} params    params.which:tab的标题或者index;params.iframe:iframe的相关参数
     * @return {jq Object}        [description]
     */
    loadTabIframe:function(jq,params){
        return jq.each(function(){
            var $tab = $(this).tabs('getTab',params.which);
            if($tab==null) return;

            var $tabBody = $tab.panel('body');

            //销毁已有的iframe
            var $frame=$('iframe', $tabBody);
            if($frame.length>0){
                try{//跨域会拒绝访问,这里处理掉该异常
                    $frame[0].contentWindow.document.write('');
                    $frame[0].contentWindow.close();
                }catch(e){
                    //Do nothing
                }
                $frame.remove();
                if($.browser.msie){
                    CollectGarbage();
                }
            }
            $tabBody.html('');

            $tabBody.css({'overflow':'hidden','position':'relative'});
            var $mask = $('<div style="position:absolute;z-index:2;width:100%;height:100%;background:#ccc;z-index:1000;opacity:0.3;filter:alpha(opacity=30);"><div>').appendTo($tabBody);
            var $maskMessage = $('<div class="mask-message" style="z-index:3;width:auto;height:16px;line-height:16px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-92px;border:2px solid #d4d4d4;padding: 12px 5px 10px 30px;background: #ffffff url(\'../../themes/default/images/loading.gif\') no-repeat scroll 5px center;">' + (params.iframe.message || 'Processing, please wait ...') + '</div>').appendTo($tabBody);
            var $containterMask = $('<div style="position:absolute;width:100%;height:100%;z-index:1;background:#fff;"></div>').appendTo($tabBody);
            var $containter = $('<div style="position:absolute;width:100%;height:100%;z-index:0;"></div>').appendTo($tabBody);

            var iframe = document.createElement("iframe");
            iframe.src = params.iframe.src;
            iframe.frameBorder = params.iframe.frameBorder || 0;
            iframe.height = params.iframe.height || '100%';
            iframe.width = params.iframe.width || '100%';
            if (iframe.attachEvent){
                iframe.attachEvent("onload", function(){
                    $([$mask[0],$maskMessage[0]]).fadeOut(params.iframe.delay || 'slow',function(){
                        $(this).remove();
                        if($(this).hasClass('mask-message')){
                            $containterMask.fadeOut(params.iframe.delay || 'slow',function(){
                                $(this).remove();
                            });
                        }
                    });
                });
            } else {
                iframe.onload = function(){
                    $([$mask[0],$maskMessage[0]]).fadeOut(params.iframe.delay || 'slow',function(){
                        $(this).remove();
                        if($(this).hasClass('mask-message')){
                            $containterMask.fadeOut(params.iframe.delay || 'slow',function(){
                                $(this).remove();
                            });
                        }
                    });
                };
            }
            $containter[0].appendChild(iframe);
        });
    },
    /**
     * 增加iframe模式的标签页
     * @param {[type]} jq     [description]
     * @param {[type]} params [description]
     */
    addIframeTab:function(jq,params){
        return jq.each(function(){
            if(params.tab.href){
                delete params.tab.href;
            }
            $(this).tabs('add',params.tab);
            $(this).tabs('loadTabIframe',{'which':params.tab.title,'iframe':params.iframe});
        });
    },
    /**
     * 更新tab的iframe内容
     * @param  {jq Object} jq     [description]
     * @param  {Object} params [description]
     * @return {jq Object}        [description]
     */
    updateIframeTab:function(jq,params){
        return jq.each(function(){
            params.iframe = params.iframe || {};
            if(!params.iframe.src){
                var $tab = $(this).tabs('getTab',params.which);
                if($tab==null) return;
                var $tabBody = $tab.panel('body');
                var $iframe = $tabBody.find('iframe');
                if($iframe.length===0) return;
                $.extend(params.iframe,{'src':$iframe.attr('src')});
            }
            $(this).tabs('loadTabIframe',params);
        });
    }
});

解决方案二、待解决。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值