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 相关文章推荐
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
jquery选择器简述
Aug 31 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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
php设计模式 Factory(工厂模式)
2011/06/26 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP实现验证码校验功能
2017/11/16 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
react+redux的升级版todoList的实现
2017/12/18 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python 网络爬虫初级实现代码
2016/02/27 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
python通过实例讲解反射机制
2019/10/17 Python
python获取整个网页源码的方法
2020/08/03 Python
通过代码实例了解Python sys模块
2020/09/14 Python
荷兰本土平价百货:HEMA
2017/10/23 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
C语言编程题
2015/03/09 面试题
办公室打字员岗位职责
2014/04/16 职场文书
法人委托书
2014/07/31 职场文书
给校长的一封检讨书
2014/09/20 职场文书
实习护士自荐信
2015/03/25 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
MySQL创建管理子分区
2022/04/13 MySQL