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 相关文章推荐
JavaScript Cookie 直接浏览网站分网址
Dec 08 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
手机号码,密码正则验证
Sep 04 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 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
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
详解小程序退出页面时清除定时器
2019/04/28 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
Python常用模块用法分析
2014/09/08 Python
深入理解Python中装饰器的用法
2016/06/28 Python
利用Python获取操作系统信息实例
2016/09/02 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
Python错误的处理方法
2020/06/23 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
C#笔试题集合
2013/06/21 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
英语翻译系毕业生求职信
2013/09/29 职场文书
大学班级学风建设方案
2014/05/01 职场文书
环卫工人节活动总结
2014/08/29 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
接收函格式
2015/01/30 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP