多iframe使用tab标签方式添加删除切换的处理实例Word文档下载推荐.docx
《多iframe使用tab标签方式添加删除切换的处理实例Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《多iframe使用tab标签方式添加删除切换的处理实例Word文档下载推荐.docx（7页珍藏版）》请在冰豆网上搜索。
下面举例说明里面的内容，例子中有两个Tab页，效果图如下
主要style样式表如下
ViewCode
标签内容如下 &
--页面标签列表--&
&
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&
tab-10301"
active"
#tab-content-10301"
动向汇报&
deleteTab（10301）"
--页面内容列表，和页面标签列表对应--&
"
tab-content-0"
iframeid="
iframepage0"
name="
iframepage1"
width="
100%"
frameborder="
0"
scrolling="
no"
src="
/business/system/manage/welcome/list/page"
height="
311"
/iframe&
divid="
tab-content-10301"
iframepage4"
iframepage5"
/business/workReport/manage/list/myPage"
看上面黑色粗体字，tab标签列表中的a元素的href属性即是对应的页面内容DIV标签的id。
tab标签li和内容标签div默认都是隐藏的，通过添加classactive来使之显示出来。
实现点击切换显示tab显示的代码为
//切换tab页的显示
$（document）.on（'
click'
'
#myTab&
li'
function（e）{
//清除原来显示的tab页
varoldTab=$（"
#myTabli.active"
）.removeClass（"
）.find（"
a[data-toggle='
tab'
]"
）;
$（oldTab.attr（"
href"
））.removeClass（"
//设置新的显示tab页
varnewTab=$（this）.addClass（"
$（newTab.attr（"
））.addClass（"
refreshTabHistory（false/*isDelete*/,$（this）.attr（'
id'
）.substring（4））;
}）
//手动调用切换到要显示的tab页,当前的action只支持show
//eg:
$（"
#tab-0a[data-toggle='
）.tab（"
show"
$.fn.tab=function（action）{
if（action=="
）{
$（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）{
$（'
+id+'
a'
）.tab（'
show'
}else{
vartab_id="
+id,
tab_content_id="
+id;
//添加tab页签
$（"
li"
#myTab"
）.append（"
liid='
+tab_id+"
class='
active'
adata-toggle='
href='
#"
+tab_content_id+"
+text+"
+（"
iclass='
fafa-times'
onclick='
deleteTab（\"
+id+"
\"
）'
）+"
//添加新的内容显示
.tab-content&
div"
.tab-content"
divid='
+tab_content_id+"
+"
iframeid='
iframepage"
+（pageCounter++）+"
name='
+（pageCounter++）
width='
100%'
frameborder='
0'
scrolling='
no'
src='
+url+"
//刷新切换tab的历史记录
refreshTabHistory（false/*isDelete*/,id）;
//重新设置tab页签的宽度
refreshWidth（）;
//参数id为tab的标志，但是并不是tab页的id属性，真正的id属性值是"
functiondeleteTab（id）{
vartabJQ=$（"
#tab-"
+id）,
tabContentJQ=$（"
#tab-content-"
+id）;
if（!
tabJQ.hasClass（"
））{
tabJQ.remove（）;
tabContentJQ.remove（）;
refreshTabHistory（true/*isDelete*/,id）;
}else{
#tab-'
+currentTabId+'
&
）.click（）;
//关闭当前tab页的快速方法
functioncloseCurrentTab（）{
deleteTab（currentTabId）;
新增、修改、切换tab的历史记录刷新函数
刷新页签切换历史
isdelete:
是否是删除tab页签,true:
是，false：
否
curTabId：
要处理的tab页签的id,tab页签html标签元素的ID属性格式为"
+curTabId
functionrefreshTabHistory（isdelete,curTabId）{
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）;
//如果是新增页签，先保证历史记录中没有改页签（有就删掉），然后将新增的页签放在历史记录的最后面（即该页签为最新）
if（index&
leng）{
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=$（'
）,
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
aPaddingLeft=0;
//tab页签名称元素a标签的宽度和padding-left。
这个是在box-sizing:
border-box。
的情况下
tabs.find（'
a'
）.css（{'
width'
:
（tabContentAverageWidth+aPaddingLeft）,'
padding-left'
aPaddingLeft}）;
完整源码，里面有一个测试例子
如果觉得本文不错，请点击右下方【推荐】！
升级会员 