EasyUI实现tabs组件IFrame模式的遮罩效果
2014-04-22 17:01
351 查看
需求分析
在jQuery Easyui框架中,大多使用url方式(即ajax方式)加载数据的话,都设计了“等待中效果”或者“遮罩效果”。但是实际应用中,并不一定只有ajax方式才需要这些效果,最常见的IFrame其实也需要这种效果,而tabs是使用IFrame频率最高的组件了,本文就来实现tabs组件IFrame模式的遮罩效果寻找奠基石
跟ajax不同,IFrame没有请求成功后的回调函数,要实现遮罩的话,我们必须知道在何时关闭遮罩,所以必须能够监控到IFrame是否加载完成才能做出我们想要的遮罩效果。怎样才能知道IFrame是否加载成功了呢?很幸运,我们总有巨人的肩可以站:var iframe = document.createElement("iframe"); iframe.src = "http://www.baidu.com"; if (iframe.attachEvent){ iframe.attachEvent("onload", function(){ alert("Local iframe is now loaded."); }); } else { iframe.onload = function(){ alert("Local iframe is now loaded."); }; } document.body.appendChild(iframe);
如果是IE的话,我们通过attachEvent来注册onload事件,如此一来,IFrame的的onload事件就兼容各个浏览器了。
寻找一件外衣
有了奠基石,我们还得找件可以见人的衣服,遮罩效果当然要做得简洁大方又不失美观才行,我们注意到,Easyui的datagrid组件的遮罩效果就不错,实现起来也不麻烦,就是一个遮罩层,一个消息层,再用相对定位固定住绝对定位,使用top和left配合margin就能实现消息层大体水平垂直居中了。衣服光漂亮还不行,还得性感,怎么性感呢?当然要露了,要若隐若现才性感,性感才能吸引眼球。所以,我们还需要做一个淡入淡出的效果,遮罩淡出,IFrame淡入。不幸的是,IFrame是个不听说的玩意,它总是忽略自身的z-index属性,所以我只能再用一个div容易包裹IFrame。
实现代码
/** * @author {CaoGuangHui} */ $.extend($.fn.tabs.methods, { /** * 加载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); }); } });
addIframeTab方法的参数包含以下属性:
名称 | 参数类型 | 描述以及默认值 |
---|---|---|
tab | object | 该参数是对象,其属性列表同于tabs自带add方法的入参属性列表。 |
iframe.src | string | 目标框架页面的地址,必填项。 |
iframe.height | string | 框架标签iframe的高度,默认值为'100%'。 |
iframe.width | string | 框架标签iframe的宽度,默认值为'100%'。 |
iframe.frameBorder | number | 框架标签iframe的边框宽度,默认值为0。 |
iframe.message | string | 加载中效果显示的消息,默认值为'Processing, please wait ...' |
名称 | 参数类型 | 描述以及默认值 |
---|---|---|
which | number/string | tab页的index或者标题均可以。 |
iframe | object | 选项同于addIframeTab方法,不过可以不设置这个参数,不设置的话,则使用原有框架的src刷新。 |
$('#tabs').tabs('addIframeTab',{
tab:{title:'iframe'+count++,closable:true},
iframe:{src:'http://www.loststop.com'}
});
相关文章推荐
- 实现tabs组件IFrame模式的遮罩效果
- Extjs 实现iframe 整个页面遮罩效果
- 实现点击在组件下方弹出单选框。并且选中哪个哪个后方显示对勾。文字变色。同时展示Popupwindow实现和遮罩效果
- easyui tabs组件关闭tab时释放iframe占用内存
- React Native之Modal组件实现遮罩层效果
- jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
- 用js+iframe形成页面的一种遮罩效果的具体实现
- 扩展jQuery easyui tabs组件,实现根据id(或者自定义属性)操作tab标签
- React Native之Modal组件实现遮罩层效果
- Vue.js组件tabs实现选项卡切换效果
- Vue.js组件tabs实现选项卡切换效果
- 扩展easyui.datagrid,实现加载数据遮罩效果代码
- 用js+iframe形成页面的一种遮罩效果的具体实现
- easyui Draggable组件实现拖动效果
- android view用动画实现遮罩效果
- TabLayout 和ViewPager和Fragment的多页面滑动(主要实现一个水平的布局用来展示Tabs加上ViewPager实现联动效果)
- UE4移动组件详解(三)——RootMotion与特殊移动模式的实现思路
- 为何firefox不支持insertRow和insertCell。我如何能让firefox显示和ie显示的效果一样?iframe实现高度自适应,兼容FF、Opera、Safari
- 在ExtJS的ComboBox组件中实现下拉树效果
- 微信小程序 实现tabs选项卡效果实例代码