当前位置:文档之家› 多iframe使用tab标签方式添加、删除、切换的处理实例

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

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

多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" 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="/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="/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').substrin g(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 = '';//当前焦点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);

}

新增、修改、切换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});

}

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

View Code

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

电脑快捷键使用大全

快捷键,又叫快速键或热键,指通过某些特定的按键、按键顺序或按键组合来完成一个操作,很多快捷键往往与如Ctrl 键、Shift 键、Alt 键、Fn 键以及Windows 平台下的Windows 键和Mac 机上的Meta 键等配合使用。利用快捷键可以代替鼠标做一些工作,可以利用键盘快捷键打开、关闭和导航“开始”菜单、桌面、菜单、对话框以及网页。 Alt+ESC 切换到上一个操作的窗口 Alt+F4 关闭当前窗口 Print Screen 截取当前全屏幕到剪切板 Alt+Print Screen 截取当前窗口屏幕截图到剪切板 Alt+Shift 在输入法之间切换 Alt+Tab 切换当前打开的窗口 Alt+Shift+Tab 反向切换当前打开的窗口 Alt+up 打开当前文件夹上一层文件夹 Backspace 返回上一页 Ctrl+A 全选 Ctrl+Alt+Tab 不关闭菜单,循环切换打开的窗口 Ctrl+B IE7 中整理收藏夹 Ctrl+C 复制

Ctrl+D IE7 中将当前页加入收藏夹 Ctrl+E 激活搜索栏,资源管理器和IE7中有效 Ctrl+Esc 打开开始菜单 Ctrl+F IE7 中打开搜索当前页面菜单 Ctrl+H IE7 中打开历史记录 Ctrl+I IE7 中打开收藏夹 Ctrl+J IE7 中打开RSS Feed Ctrl+N IE7 中打开与当前窗口相同的另一个新窗口 Ctrl+P IE7 中打印 Ctrl+Q IE7 中打开快速导航选项卡 Ctrl+R IE7 中刷新当前选项卡 Ctrl+Shift+Esc 打开任务管理器 Ctrl+Space 切换中英输入法 Ctrl+T IE7 中打开新选项卡 Ctrl+V

笔记本数字键小键盘切换大全

笔记本数字键小键盘切换大全 电脑维护:在台式电脑中都有设在右边的专用数字键盘,而在笔记本中由于键盘容量问题,只有横排的数字键盘,没有专用数字键盘,但在笔记本的中间右侧,有些字母键下方也标有数字键,比如J下方标为1,K下方标为2,L下方标为3。如何进行字母键与数字键的切换?不同的笔记本,切换的方法不同。以下是几个品牌笔记本小键盘切换的方法,可以试一下。 1、Shift NumLk 在键盘上方有一个写有NumLk 字样也有的是和ScrLk在一起的 ,同时按住Shift NumLk 就可以切换了。一般而言多在右上或右下。如果你的NumLk键上字样的颜色跟字母键盘上字样的颜色不同,一般表示你要同时按下Fn(Function)键才能按倒它,如果字样是同色却在该键盘上方,表示你要按Shift键才按得到它。按第一次时启动数字小键盘(这时有的本本上会有一个写着数字1的锁的符号灯会亮起),再按一次恢复正常。 2、FN+ NumLk 这种情况是功能键(FN)和NumLk是同一种颜色,如果不是同一种颜色那么就是上面的处理办法。日立笔记本,DELl笔记本,一般就是这种方法。按住Fn不放,再按NumLK键,你在键盘上找找,NumL K键是和其他功能键共用的一个键,我的dell是F4键,用蓝色字母标在键盘上的。 3、用系统的屏幕键盘来关闭或者打开数字键盘方法如下:

开始程序附件辅助工具屏幕键盘单击NLK即可切换 4、Fn+F11 NEC,IBM,东芝笔记本电脑数字键切换一般用这种方法。 5、Fn+PrtSc 注意:如果一种方法不行,可以用另一种方法试试。1.按住Fn不放,再按Num LK键。 2.进BIOS里面 BIOS中有一项“Keypad (Embedded)”,改为By N um Lk试试,然后在体系中按 Num LK就可以应用数字键盘了不用一直按Fn不放了再按一次即封闭数字键盘区! 笔记本电脑右边的字母键盘(U、I、O、P、J、K、L、M),可以跟数字共用,切换数字跟字母的方式是FN+numlk scrlk+或者shift+num lk scrlk,唆使灯那个1会发亮,实用于尽大部分品牌的笔记本,I BM、联想、清华同方。。。笔记本的Fn快捷键笔记本的FN键和Ct rl键一样,都是组合键。 FN键功效 FN功效键大全--三星篇 FN+ESC:将机器置于等候状况,新蛋。(P25为:FN+F5) FN+F2:电池状况显示 FN+F4:切换显示器(P25为:FN+F7) FN+F6:静音(P25为:FN+END) FN+F7:打开封闭SPDIF输出(P25为:FN+F8) FN+F11:相当于按下NUM LOCK

CSS实现导航条Tab切换的三种方法

CSS实现导航条Tab切换的三种方法 前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 buju 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成。要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局【语义布局】 从语义布局的角度来看,每一个导航标题和其对应的导航内容应该是一个整体

相关文档 最新文档