多iframe使用tab标签方式添加删除切换的处理实例.docx
- 文档编号:3656885
- 上传时间:2022-11-24
- 格式:DOCX
- 页数:7
- 大小:17.57KB
多iframe使用tab标签方式添加删除切换的处理实例.docx
《多iframe使用tab标签方式添加删除切换的处理实例.docx》由会员分享,可在线阅读,更多相关《多iframe使用tab标签方式添加删除切换的处理实例.docx(7页珍藏版)》请在冰豆网上搜索。
多iframe使用tab标签方式添加删除切换的处理实例
多iframe使用tab标签方式添加、删除、切换的处理实例
紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案
如果采用iframe来切换显示内容的方式来展现办公Web。
那么需要解决几个问题
1.tab标签需要和显示的iframe一一对应,当点击到某个tab页签的时候需要切换到对应的iframe。
2.需要有新增、删除页签的tab功能。
3.在tab页签之间切换的时候需要有一个记录点击的页签的历史记录的功能。
何用?
当你删除某个页签的时候,需要回溯到上一个页签。
4.不断添加页签,需要计算页签的宽度做适配。
本实例是这样做的
<divclass="tabbable"id="tabs">
<!
--Tab标签列表-->
<ulclass="navnav-tabs"id="myTab"></ul>
<!
--显示内容列表,和Tab标签列表一一对应-->
<divclass="tab-content"></div>
</div>
如上,#myTab是用来保存Tab标签页的,.tab-content用来保存iframe页面列表。
下面举例说明里面的内容,例子中有两个Tab页,效果图如下
主要style样式表如下
ViewCode
标签内容如下 <divclass="tabbable"id="tabs">
<!
--页面标签列表-->
<ulclass="navnav-tabs"id="myTab">
<liid="tab-0"class="">
<adata-toggle="tab"href="#tab-content-0"style="width:
518px;padding-left:
10px;">首页</a>
<iclass="fafa-times"onclick="deleteTab(0)"></i>
</li>
<liid="tab-10301"class="active">
<adata-toggle="tab"href="#tab-content-10301"style="width:
518px;padding-left:
10px;">动向汇报</a>
<iclass="fafa-times"onclick="deleteTab(10301)"></i>
</li>
</ul>
<!
--页面内容列表,和页面标签列表对应-->
<divclass="tab-content">
<divclass=""id="tab-content-0">
<iframeid="iframepage0"name="iframepage1"width="100%"frameborder="0"scrolling="no"src="/business/system/manage/welcome/list/page"height="311"></iframe>
</div>
<divid="tab-content-10301"class="active">
<iframeid="iframepage4"name="iframepage5"width="100%"frameborder="0"scrolling="no"src="/business/workReport/manage/list/myPage"height="311"></iframe>
</div>
</div>
</div>
看上面黑色粗体字,tab标签列表中的a元素的href属性即是对应的页面内容DIV标签的id。
tab标签li和内容标签div默认都是隐藏的,通过添加classactive来使之显示出来。
实现点击切换显示tab显示的代码为
//切换tab页的显示
$(document).on('click','#myTab>li',function(e){
//清除原来显示的tab页
varoldTab=$("#myTabli.active").removeClass("active").find("a[data-toggle='tab']");
$(oldTab.attr("href")).removeClass("active");
//设置新的显示tab页
varnewTab=$(this).addClass("active").find("a[data-toggle='tab']");
$(newTab.attr("href")).addClass("active");
refreshTabHistory(false/*isDelete*/,$(this).attr('id').substring(4));
})
//手动调用切换到要显示的tab页,当前的action只支持show
//eg:
$("#tab-0a[data-toggle='tab']").tab("show");
$.fn.tab=function(action){
if(action=="show"){
$(this).parent().click();
}
}
新增和删除tab页
varcurrentTabId='';//当前焦点Tab
//在非左侧菜单栏弹出的tab页也会用到该数据,如common.js中的pageForward函数
varpageCounter=0;
/*
id:
tab页签的html标签ID属性格式为"tab-"+id,内容容器的html标签ID格式为"tab-content-"+id
text:
tab页签的显示文本
url:
打开的iframe的url
innerTab:
是否是内部弹出页(打开的tab页触发添加新的tab页),默认为undefined/false
*/
functionaddTab(id,text,url,innerTab){
//如果某个页面已经打开,则切换到该页显示即可,不会新添加tab页
if($('#myTab#tab-'+id).length>0){
$('#myTab#tab-'+id+'a').tab('show');
}else{
vartab_id="tab-"+id,
tab_content_id="tab-content-"+id;
//添加tab页签
$("#myTab>li").removeClass("active");
$("#myTab").append("<liid='"+tab_id+"'class='active'><adata-toggle='tab'href='#"
+tab_content_id+"'>"+text+"</a>"
+("<iclass='fafa-times'onclick='deleteTab(\""+id+"\")'></i>")+"</li>");
//添加新的内容显示
$(".tab-content>div").removeClass("active");
$(".tab-content").append("<divid='"+tab_content_id+"'class='active'>"
+"<iframeid='iframepage"+(pageCounter++)+"'name='iframepage"+(pageCounter++)
+"'width='100%'frameborder='0'scrolling='no'src='"+url+"'></iframe></div>");
//刷新切换tab的历史记录
refreshTabHistory(false/*isDelete*/,id);
}
//重新设置tab页签的宽度
refreshWidth();
}
//参数id为tab的标志,但是并不是tab页的id属性,真正的id属性值是"tab-"+id
functiondeleteTab(id){
vartabJQ=$("#tab-"+id),
tabContentJQ=$("#tab-content-"+id);
if(!
tabJQ.hasClass("active")){
tabJQ.remove();
tabContentJQ.remove();
refreshTabHistory(true/*isDelete*/,id);
}else{
tabJQ.remove();
tabContentJQ.remove();
refreshTabHistory(true/*isDelete*/,id);
$('#tab-'+currentTabId+'>a').tab('show').click();
}
refreshWidth();
}
//关闭当前tab页的快速方法
functioncloseCurrentTab(){
deleteTab(currentTabId);
}
新增、修改、切换tab的历史记录刷新函数
/*
刷新页签切换历史
isdelete:
是否是删除tab页签,true:
是,false:
否
curTabId:
要处理的tab页签的id,tab页签html标签元素的ID属性格式为"tab-"+curTabId
*/
functionrefreshTabHistory(isdelete,curTabId){
if(!
refreshTabHistory.histoty){
//用来记录用户点击tab的历史
refreshTabHistory.histoty=[];
}
varindex=0,
leng=refreshTabHistory.histoty.length;
//查找传入的tab页签在历史记录中的位置
for(;index<leng;index++){
if(refreshTabHistory.histoty[index]==curTabId){
break;
}
}
//如果是删除页签,直接在历史记录中删除即可,历史记录的其他页签的顺序不变
if(isdelete){
refreshTabHistory.histoty.splice(index,1);
//如果是新增页签,先保证历史记录中没有改页签(有就删掉),然后将新增的页签放在历史记录的最后面(即该页签为最新)
}else{
if(index<leng){
refreshTabHistory.histoty.splice(index,1);
}
refreshTabHistory.histoty.push(curTabId);
}
currentTabId=refreshTabHistory.histoty[refreshTabHistory.histoty.length-1];
}
每一个页签的构成如下
可以看到tab页签的margin-left和关闭按钮是必须要有的,所以tab页签的最小宽度为25px。
唯一可以设置宽度的是tab页签的名称显示部分(也就是css选择器#myTab>li>a对应的DOM元素),我们必须保证每个tab页签的宽度相同。
本实例处理为:
默认tab页签名称元素a标签的最大宽度是108px。
随着页签的增多,宽度不够用的时候先a标签的内容部分的宽度,当a标签的内容部分的宽度为0后开始缩减a标签的padding-left,直到padding-left为0为止。
当页签过多的时候(每个页签至少25px,那么宽度总会到不够用的时候),我们没有考虑这种情况的处理,试想谁会打开这么多页签,这会让浏览器都卡住了。
源码如下
//刷新重置tab页签的宽度
functionrefreshWidth(){
varpanelWidth=$('#myTab').width()-20/*可能存在的滚动条宽度*/,
tabs=$('#myTab>li'),
tabContentAverageWidth=0/*tab>a标签的宽度*/,
minTabAverageWidth=25/*margin-left:
5,X按钮宽度为20*/,
zeroContentTabWidth=35/*当tab>a标签宽度为0时tab标签对应的宽度是30px,外加上margin-left:
5*/,
aPaddingLeft=10/*tab>a标签的padding-left默认是10,当averageWidth<35需要调整*/;
averageWidth=parseInt(panelWidth/(tabs.length),10);//
if(averageWidth>=zeroContentTabWidth){
tabContentAverageWidth=averageWidth-zeroContentTabWidth;
/*35>averageWidth>=25*/
}elseif(averageWidth>=minTabAverageWidth){
tabContentAverageWidth=0;
aPaddingLeft=averageWidth-minTabAverageWidth;
//averageWidth<25
}else{
tabContentAverageWidth=0;
aPaddingLeft=0;
}
//tab页签名称元素a标签的宽度和padding-left。
这个是在box-sizing:
border-box。
的情况下
tabs.find('>a').css({'width':
(tabContentAverageWidth+aPaddingLeft),'padding-left':
aPaddingLeft});
}
完整源码,里面有一个测试例子
ViewCode
如果觉得本文不错,请点击右下方【推荐】!
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- iframe 使用 tab 标签 方式 添加 删除 切换 处理 实例