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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
基于jquery的滚动新闻列表
Jun 19 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
js正则匹配多个全部数据问题
Dec 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
PHP文件上传原理简单分析
2011/05/29 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
php获取根域名方法汇总
2014/10/28 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
javascript 写类方式之七
2009/07/05 Javascript
javascript void(0)的妙用
2009/10/21 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python+pyqt5编写md5生成器
2019/03/18 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
PageFactory设计模式基于python实现
2020/04/14 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
运动员获奖感言
2014/08/15 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
小学语文复习计划
2015/01/19 职场文书
同意报考公务员证明
2015/06/17 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python