多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样式表如下
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" > 首页 </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" >动向汇报</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="/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" scrollin
g="no" src="/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");iframe参数传递
$.fn.tab = function(action){
  if(action == "show"){
    $(this).parent().click();
  }
}
新增和删除tab页
var currentTabId = '';//当前焦点Tab
//在非左侧菜单栏弹出的tab页也会用到该数据，如common.js中的pageForward函数

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。