JavaScript浏览器选项卡效果


Posted in Javascript onAugust 25, 2010

有图如下:
JavaScript浏览器选项卡效果
代码如下:

/* 
head html : <span></span> 
body html : <iframe></iframe> 
*/ 
var Tab = function(id,title,url,isClose){ 
this.id = id; 
this.title = title; 
this.url = url; 
this.head = jQuery('<span class="tab-head">' + this.title +'</span>'); 
this.body = jQuery('<iframe name="ifm' + this.id +'" src="' + this.url +'" frameborder=0 class="tab-body"></iframe>').hide(); 
isClose && (this.close = jQuery('<span class="tab-head-closeBtn">×</span>'),this.closeBtn()); 
}; 
Tab.prototype = { 
closeBtn : function(){ 
var self = this; 
self.close.bind("mouseover",function(){ 
jQuery(this).addClass("tab-closeBtn-hover"); 
}); 
self.close.bind("mouseout",function(){ 
jQuery(this).removeClass("tab-closeBtn-hover"); 
}); 
self.head.append(self.close); 
}, 
getFocus : function(){ 
this.head.addClass("tab-head-active"); 
this.body.show(); 
}, 
loseFocus : function(){ 
this.head.removeClass("tab-head-active"); 
this.body.hide(); 
}, 
destory : function(){ 
this.head.remove(); 
this.body.remove(); 
}, 
}; 
/* 
head html : <div><span></span><span></span>...</div> 
body html : <div><iframe></iframe><iframe></iframe>...</div> 
*/ 
var TabView = function(container){ 
this.container = container; 
this.head = jQuery('<div class="tabView-head"></div>'); 
this.body = jQuery('<div class="tabView-body"></div>'); 
this.tabs = []; 
this.tabId = 0; 
this.focusTab = null; 
this.init(); 
}; 
TabView.prototype = { 
init : function(){ 
this.container.append(this.head).append(this.body); 
}, 
add : function(title,url,isClose){ 
var self = this; 
var tab = new Tab(self.tabId,title,url,isClose); 
self._tabEvents(tab); 
(self.tabs.length==0) && (tab.getFocus(),self.focusTab=tab); 
self.tabs.push(tab); 
self.head.append(tab.head); 
self.body.append(tab.body); 
self.tabId++; 
}, 
remove_ref : function(tab){ 
var self = this; 
for(var i=0;i<self.tabs.length;i++){ 
if(tab.id===self.tabs[i].id){ 
tab.destory(); 
self.tabs.splice(i,1); 
return i; 
} 
} 
return -1; 
}, 
destory : function(){ 
this.head.remove(); 
this.body.remove(); 
}, 
_tabEvents : function(tab){ 
var self = this; 
tab.head.bind("click",function(){ 
if(self.focusTab.id != tab.id){ 
tab.getFocus(); 
self.focusTab.loseFocus(); 
self.focusTab = tab; 
} 
}); 
tab.close && tab.close.bind("click",function(){ 
tab.destory(); 
var i = self.remove_ref(tab); 
if(tab.id==self.focusTab.id){//如果关闭的是当前的tab 
if(self.tabs.length==0){//如果所有tab都已关闭 
self.destory(); 
}else{ 
var nextIndex = self.tabs.length==i ? i-1 : i; 
self.focusTab = self.tabs[nextIndex]; 
self.focusTab.getFocus(); 
} 
} 
}); 
}, 
};
Javascript 相关文章推荐
js脚本学习 比较实用的基础
Sep 07 Javascript
Exjs 入门篇
Apr 07 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 #Javascript
Javascript new关键字的玄机 以及其它
Aug 25 #Javascript
jquery下组织javascript代码(js函数化)
Aug 25 #Javascript
jquery实现居中弹出层代码
Aug 25 #Javascript
jquery下实现overlay遮罩层代码
Aug 25 #Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 #Javascript
javascript下string.format函数补充
Aug 24 #Javascript
You might like
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
js微信支付实现代码
2016/12/22 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Django中间件实现拦截器的方法
2018/06/01 Python
对Python信号处理模块signal详解
2019/01/09 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
应届毕业生求职信范文
2013/12/18 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
详解 TypeScript 枚举类型
2021/11/02 Javascript
Elasticsearch 聚合查询和排序
2022/04/19 Python