你的位置:首页 > Java教程

[Java教程]多iframe使用tab标签方式添加、删除、切换的处理实例


  紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案

  

  如果采用iframe来切换显示内容的方式来展现办公Web。那么需要解决几个问题

  1.tab标签需要和显示的iframe一一对应,当点击到某个tab页签的时候需要切换到对应的iframe。

  2.需要有新增、删除页签的tab功能。

  3.在tab页签之间切换的时候需要有一个记录点击的页签的历史记录的功能。何用?当你删除某个页签的时候,需要回溯到上一个页签。

  4.不断添加页签,需要计算页签的宽度做适配。

 

  本实例是这样做的

<div class="tabbable" id="tabs">   <!-- Tab标签列表 -->   <ul class="nav nav-tabs" id="myTab"></ul>   <!-- 显示内容列表,和Tab标签列表一一对应 -->   <div class="tab-content"></div> </div>

  如上,#myTab是用来保存Tab标签页的,.tab-content用来保存iframe页面列表。下面举例说明里面的内容,例子中有两个Tab页,效果图如下 

   

  主要style样式表如下

<style type="text/css">html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{ margin: 0; padding:0;}*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}ul, ol { margin-top: 0; margin-bottom: 10px;}a { color: #428bca; text-decoration: none;}.fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}:before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}/*这是一个字体,可以自定义一个x图片*/.fa-times:before { content: "\f00d";}.tabbable { border: none; margin-bottom: 10px;}.nav { padding-left: 0; margin-bottom: 0; list-style: none;}.nav>li { position: relative; display: block;}.nav-tabs { margin-bottom: 0; margin-left: 0; border: 0; top: 2px; background-color: #f3f3f3; -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3); box-shadow: 0 0 4px rgba(0,0,0,.3); border-bottom: 1px solid #ddd;}.nav-tabs>li { float: left; margin-bottom: 0px; margin-left: 5px;}.nav-tabs li i { position: relative; margin-left: 10px; cursor: pointer;}.nav-tabs li [class*=" fa-"], .nav-tabs li [class^="fa-"] { width: 1.25em; display: inline-block; text-align: center;}#myTab { height: 40px; overflow: hidden;}#myTab > li { height: 35px; overflow: hidden; margin-top: 5px; background: #dedede; background: rgba(0,0,0,0.05); color: #777;}#myTab > li.active, #myTab>li:hover, #myTab>li:focus { background-color: #fff; border-bottom-color: transparent; box-shadow: 0 -2px 3px 0 rgba(0,0,0,.15);}#myTab > li > a { position: relative; display: inline-block; white-space: nowrap; overflow: hidden; padding: 8px 0px 8px 10px; margin: 0 20px 0 0; border-top: 0px; box-shadow: none; background: transparent; line-height: 17px; border: 0; max-width: 108px; color: #777;}#myTab > li.active { border-top: 2px solid #2dc3e8;}#myTab li [class*=" fa-"], #myTab li [class^="fa-"] { vertical-align: middle; margin-left: 0px; position: absolute; right: 2px; margin-top: 10px;}.tab-content { background: none; padding: 0; padding-top: 5px; position: relative;}.tab-content>div{ display: none;}.tab-content>.active { display: block;}</style>

View Code

  标签内容如下  


<div class="tabbable" id="tabs">  <!-- 页面标签列表 -->  <ul class="nav nav-tabs" id="myTab">
    <li id="tab-0" class="">
      <a data-toggle="tab" href="#tab-content-0" style="width: 518px; padding-left: 10px;"> 首页 </a>
      <i class="fa fa-times" onclick="deleteTab(0)"></i>
    </li>
    <li id="tab-10301" class="active">
      <a data-toggle="tab" href="#tab-content-10301" style="width: 518px; padding-left: 10px;">动向汇报</a>
      <i class="fa fa-times" onclick="deleteTab(10301)"></i>
    </li>
  </ul>  <!-- 页面内容列表,和页面标签列表对应 -->
  <div class="tab-content">
    <div class=" " id="tab-content-0">
      <iframe id="iframepage0" name="iframepage1" width="100%" frameborder="0" scrolling="no" src="http://www.cnblogs.com//business/system/manage/welcome/list/page" height="311"></iframe>
    </div>
    <div id="tab-content-10301" class="active">
      <iframe id="iframepage4" name="iframepage5" width="100%" frameborder="0" scrolling="no" src="http://www.cnblogs.com//business/workReport/manage/list/myPage" height="311"></iframe>
    </div>
  </div></div>

  看上面黑色粗体字,tab标签列表中的a元素的href属性即是对应的页面内容DIV标签的id。tab标签li和内容标签div默认都是隐藏的,通过添加class active来使之显示出来。

实现点击切换显示tab显示的代码为

//切换tab页的显示$(document).on('click','#myTab > li',function(e){ //清除原来显示的tab页 var oldTab = $("#myTab li.active").removeClass("active").find("a[data-toggle='tab']"); $(oldTab.attr("href")).removeClass("active"); //设置新的显示tab页 var newTab = $(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-0 a[data-toggle='tab']").tab("show");$.fn.tab = function(action){ if(action == "show"){  $(this).parent().click(); }}

新增和删除tab页

var currentTabId = '0';//当前焦点Tab//在非左侧菜单栏弹出的tab页也会用到该数据,如common.js中的pageForward函数var pageCounter = 0;/*id:    tab页签的html标签ID属性格式为"tab-"+id,内容容器的html标签ID格式为"tab-content-"+idtext:   tab页签的显示文本url:   打开的iframe的urlinnerTab: 是否是内部弹出页(打开的tab页触发添加新的tab页),默认为undefined/false*/function addTab(id,text,url,innerTab) { //如果某个页面已经打开,则切换到该页显示即可,不会新添加tab页 if($('#myTab #tab-'+id).length > 0){  $('#myTab #tab-' + id + ' a').tab('show'); }else{  var tab_id = "tab-" + id,  tab_content_id = "tab-content-"+id;    //添加tab页签  $("#myTab > li").removeClass("active");  $("#myTab").append("<li id='" + tab_id + "' class='active'><a data-toggle='tab' href='#"   + tab_content_id + "'>" + text + "</a>"   + ("<i class='fa fa-times' onclick='deleteTab(\"" + id + "\")'></i>") + "</li>");    //添加新的内容显示  $(".tab-content > div").removeClass("active");  $(".tab-content").append("<div id='"+ tab_content_id +"' class='active>"   + "<iframe id='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-"+idfunction deleteTab(id){ var tabJQ = $("#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页的快速方法function closeCurrentTab(){ deleteTab(currentTabId);}

 

var currentTabId = '';//当前焦点Tab//在非左侧菜单栏弹出的tab页也会用到该数据,如common.js中的pageForward函数var pageCounter = 0;/*id:    tab页签的html标签ID属性格式为"tab-"+id,内容容器的html标签ID格式为"tab-content-"+idtext:   tab页签的显示文本url:   打开的iframe的urlinnerTab: 是否是内部弹出页(打开的tab页触发添加新的tab页),默认为undefined/false*/function addTab(id,text,url,innerTab) { //如果某个页面已经打开,则切换到该页显示即可,不会新添加tab页 if($('#myTab #tab-'+id).length > 0){  $('#myTab #tab-' + id + ' a').tab('show'); }else{  var tab_id = "tab-" + id,  tab_content_id = "tab-content-"+id;    //添加tab页签  $("#myTab > li").removeClass("active");  $("#myTab").append("<li id='" + tab_id + "' class='active'><a data-toggle='tab' href='#"   + tab_content_id + "'>" + text + "</a>"   + ("<i class='fa fa-times' onclick='deleteTab(\"" + id + "\")'></i>") + "</li>");    //添加新的内容显示  $(".tab-content > div").removeClass("active");  $(".tab-content").append("<div id='"+ tab_content_id +"' class='active'>"   + "<iframe id='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-"+idfunction deleteTab(id){ var tabJQ = $("#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页的快速方法function closeCurrentTab(){ deleteTab(currentTabId);}

 

新增、修改、切换tab的历史记录刷新函数

/*刷新页签切换历史isdelete: 是否是删除tab页签,true:是,false:否curTabId:要处理的tab页签的id,tab页签html标签元素的ID属性格式为"tab-"+curTabId*/function refreshTabHistory(isdelete,curTabId){ if(!refreshTabHistory.histoty){  //用来记录用户点击tab的历史  refreshTabHistory.histoty = []; } var index = 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页签的宽度function refreshWidth(){  var panelWidth = $('#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*/    }else if(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});}

  完整源码,里面有一个测试例子

<!DOCTYPE html><html lang="ch-cn"> <head>  <meta charset="utf-8">  <script type="text/javascript" src='jquery-1.9.1.js'></script>  <style type="text/css">  html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{   margin: 0;   padding:0;  }  *{   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;  }  ul, ol {   margin-top: 0;   margin-bottom: 10px;  }  a {   color: #428bca;   text-decoration: none;  }  .fa {   display: inline-block;   font-family: FontAwesome;   font-style: normal;   font-weight: normal;   line-height: 1;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;  }  :before, :after {   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;  }  /*这是一个字体,可以自定义一个x图片*/  .fa-times:before {   content: "\f00d";  }  .tabbable {   border: none;   margin-bottom: 10px;  }  .nav {   padding-left: 0;   margin-bottom: 0;   list-style: none;  }  .nav>li {   position: relative;   display: block;  }  .nav-tabs {   margin-bottom: 0;   margin-left: 0;   border: 0;   top: 2px;   background-color: #f3f3f3;   -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3);   -moz-box-shadow: 0 0 4px rgba(0,0,0,.3);   box-shadow: 0 0 4px rgba(0,0,0,.3);   border-bottom: 1px solid #ddd;  }  .nav-tabs>li {   float: left;   margin-bottom: 0px;   margin-left: 5px;  }  .nav-tabs li i {   position: relative;   margin-left: 10px;   cursor: pointer;  }  .nav-tabs li [class*=" fa-"], .nav-tabs li [class^="fa-"] {   width: 1.25em;   display: inline-block;   text-align: center;  }  #myTab {   height: 40px;   overflow: hidden;  }  #myTab > li {   height: 35px;   overflow: hidden;   margin-top: 5px;   background: #dedede;   background: rgba(0,0,0,0.05);   color: #777;  }  #myTab > li.active, #myTab>li:hover, #myTab>li:focus {   background-color: #fff;   border-bottom-color: transparent;   box-shadow: 0 -2px 3px 0 rgba(0,0,0,.15);  }  #myTab > li > a {   position: relative;   display: inline-block;   white-space: nowrap;   overflow: hidden;   padding: 8px 0px 8px 10px;   margin: 0 20px 0 0;   border-top: 0px;   box-shadow: none;   background: transparent;   line-height: 17px;   border: 0;   max-width: 108px;   color: #777;  }  #myTab > li.active {   border-top: 2px solid #2dc3e8;  }  #myTab li [class*=" fa-"], #myTab li [class^="fa-"] {   vertical-align: middle;   margin-left: 0px;   position: absolute;   right: 2px;   margin-top: 10px;  }  .tab-content {   background: none;   padding: 0;   padding-top: 5px;   position: relative;  }  .tab-content > div{   display: none;  }  .tab-content > div.active{   display: block;  }  </style> </head> <body>   <div id="tabs" >    <!-- 页面标签列表 -->    <ul id="myTab">    </ul>    <!-- 页面内容列表,和页面标签列表对应 -->    <div >    </div>  </div> </body> <script type="text/javascript"> //切换tab页的显示 $(document).on('click','#myTab > li',function(e){  //清除原来显示的tab页  var oldTab = $("#myTab li.active").removeClass("active").find("a[data-toggle='tab']");  $(oldTab.attr("href")).removeClass("active");  //设置新的显示tab页  var newTab = $(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-0 a[data-toggle='tab']").tab("show"); $.fn.tab = function(action){  if(action == "show"){   $(this).parent().click();  } } var currentTabId = '';//当前焦点Tab //在非左侧菜单栏弹出的tab页也会用到该数据,如common.js中的pageForward函数 var pageCounter = 0; /* id:    tab页签的html标签ID属性格式为"tab-"+id,内容容器的html标签ID格式为"tab-content-"+id text:   tab页签的显示文本 url:   打开的iframe的url innerTab: 是否是内部弹出页(打开的tab页触发添加新的tab页),默认为undefined/false */ function addTab(id,text,url,innerTab) {  //如果某个页面已经打开,则切换到该页显示即可,不会新添加tab页  if($('#myTab #tab-'+id).length > 0){   $('#myTab #tab-' + id + ' a').tab('show');  }else{   var tab_id = "tab-" + id,   tab_content_id = "tab-content-"+id;      //添加tab页签   $("#myTab > li").removeClass("active");   $("#myTab").append("<li id='" + tab_id + "' class='active'><a data-toggle='tab' href='#"    + tab_content_id + "'>" + text + "</a>"    + ("<i class='fa fa-times' onclick='deleteTab(\"" + id + "\")'></i>") + "</li>");      //添加新的内容显示   $(".tab-content > div").removeClass("active");   $(".tab-content").append("<div id='"+ tab_content_id +"' class='active'>"    + "<iframe id='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 function deleteTab(id){  var tabJQ = $("#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页的快速方法 function closeCurrentTab(){  deleteTab(currentTabId); } /* 刷新页签切换历史 isdelete: 是否是删除tab页签,true:是,false:否 curTabId:要处理的tab页签的id,tab页签html标签元素的ID属性格式为"tab-"+curTabId */ function refreshTabHistory(isdelete,curTabId){  if(!refreshTabHistory.histoty){   //用来记录用户点击tab的历史   refreshTabHistory.histoty = [];  }  var index = 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页签的宽度 function refreshWidth(){  var panelWidth = $('#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*/   }else if(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}); } //测试代码 for(var i = 0; i < 8; i++){  addTab(i,"test" + i,"http://www.baidu.com"); } </script> </html>

View Code

  

  如果觉得本文不错,请点击右下方【推荐】!