Jquery EasyUI-tabs动态添加、Iframe遮盖层、href和content

转载1:实现tabs组件IFrame模式的遮罩效果 | WebUI框架使用参考

转载2:项目感受之Easyui tabs的herf和content属性  

页面html代码+js引用:


<script src="./jeui/jquery.min.js" type="text/javascript"></script>
<script src="./jeui/jquery.easyui.min.js" type="text/javascript"></script>
<link href="./jeui/themes/default/easyui.css" rel="stylesheet"
 type="text/css" />
<link href="./jeui/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="./css/index.css" rel="stylesheet" type="text/css" />
<script src="./js/jquery.tabs.extend.js" type="text/javascript"></script>
<div id="center" data-options="region:'center',loadingMessage:'正在加载...'"
 class="easyui-tabs">
</div>


页面js代码:

function addTab(title,url){
		var c = $('#layout').layout('panel','center');
		if (c.tabs('exists', title)){
			c.tabs('select', title);
		} else {
			$('#center').tabs('addIframeTab',{
				//tab参数为一对象,其属性同于原生add方法参数
				tab:{
                    title:title,
                    closable:true,
                    tools:[{
                        iconCls:'icon-mini-refresh',
                        handler:function(){
                            $('#center').tabs('updateIframeTab',{'which':title,'iframe':{src:url,message:'正在刷新...'}});
                        }
                    }]
                },
				//iframe参数用于设置iframe信息,包含:
				//src[iframe地址],frameBorder[iframe边框,,默认值为0],delay[淡入淡出效果时间]
				//height[iframe高度,默认值为100%],width[iframe宽度,默认值为100%]
				iframe:{src:url,message:'正在加载 ...'}
			});
            $('#center').tabs('addEventParam');
		}
	}

jquery.tabs.extend.js

js中判断IE 释放内存部分原文是:

 if($.browser.msie){   
      CollectGarbage();   
    }   

由于jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。

/**
 * @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(!$.support.leadingWhitespace){//判断IE
                    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(\'./jeui/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);
        });
    }
});


 

addIframeTab方法的参数包含以下属性:

名称参数类型描述以及默认值
tabobject该参数是对象,其属性列表同于tabs自带add方法的入参属性列表。
iframe.srcstring目标框架页面的地址,必填项。
iframe.heightstring框架标签iframe的高度,默认值为'100%'。
iframe.widthstring框架标签iframe的宽度,默认值为'100%'。
iframe.frameBordernumber框架标签iframe的边框宽度,默认值为0。
iframe.messagestring加载中效果显示的消息,默认值为'Processing, please wait ...'

updateIframeTab方法的参数包含以下属性:

名称参数类型描述以及默认值
whichnumber/stringtab页的index或者标题均可以。
iframeobject选项同于addIframeTab方法,不过可以不设置这个参数,不设置的话,则使用原有框架的src刷新。

使用的时候只要调用addIframeTab方法就可以了:

$('#tabs').tabs('addIframeTab',{      
    tab:{title:'iframe'+count++,closable:true},      
    iframe:{src:'http://www.loststop.com'}      
});    

Jquery EasyUI -tabs 的Href方式加载数据有几个特点:
第一个就是被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段,还有在加载远程url时有遮罩效果,也就是“等待中……”效果,用户体验较好。
但是当加载的页面布局较为复杂,或者有较多的js脚本需要运行的时候,编码往往就需要谨慎了,容易出问题。href的常见问题:
1.href只加载目标URL的html片段
这个特性是由jQuery封装的ajax请求处理机制所决定的,所以目标URL页面里不需要有html,head,body等标签,即使有这些元素,也会被忽略,所以放在head标签里面的任何脚本也不会被引入或者执行。
2.短暂的页面混乱:
href链接的页面比较复杂的时候,easyui对其渲染往往需要一个较长的过程,这时候,加载进来的html片段毫无布局可以,过一会自动会好,这时候easyui已经完成对它的渲染。如何避免这个混乱的过程呢,还得靠easyui的一个基础插件——解析器(Parser)。
Parser有个onComplete事件,这个事件就是指easyui对页面完成渲染时触发,这样思路就很清晰了:用一个div遮罩住让被加载进来的html片段,在onComplete事件中,让这个div淡出,这时候渲染好的html片段就能美人出浴了,同时还整了个等待中的效果。这样要做两件事:
第一是在要加载的html片段中放一个遮罩用的div:

<div id='loading' style="position:absolute;z-index:1000;top:0px;left:0px;width:100%;height:100%;background:#DDDDDB;text-align:center;padding-top: 20%;">
    <image src='style/images/loading.gif'/> 
</div>


第二是在被加载的html片段尾部处理相关事件:

<script>
    function show(){
        $("#loading").fadeOut("normal", function(){
            $(this).remove();
        });
    }    
    var delayTime;
    $.parser.onComplete = function(){
        if(delayTime) 
            clearTimeout(delayTime);
        delayTime = setTimeout(show,500);
    }
</script>

需要注意的是,如果多个tab页面都使用了onComplete事件,当前定义的会覆盖之前定义的。其实每次easyui渲染完成均会调用onComplete事件,所以每打开一个包含easyui控件的tab页,onComplete事件就会被调用。
3.html片段的easyui组件相关脚本莫名地报错:
其实这个现象是跟第一个现象的原因一样的,easyui完成对html片段渲染需要一定的时间,页面越复杂,耗时越长,这时候难以避免html存在的脚本存在对easyui某些插件的调用,比如datagrid等,这个时候就会报错,解决方案同上,将这些脚本放到onComplete事件里处理,也就保证了渲染完成前,不会被执行。
4.放在window里面表单验证的提示信息会乱串:
这个现象应该是插件自身的bug,对位置的计算没有考虑到这些特殊的事情,解决方式可以投机取巧,在打开window后,让表单不符合验证的input获得焦点就可以了。
content方式加载数据的特点:
1. 比较灵活,你可以在脚本里面拼写html代码,然后赋值给tab的content属性,不过这种写法会使得代码易读性变差。
2. 可以把iframe赋给content,把一个iframe嵌入也就没有什么不能完成的了。
3. 使用iframe会造成客户端js重复加载,浪费资源,比如说你主页面要引用easyui的库,你的iframe也要引用.

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值