JavaScript浏览器选项卡效果
更新时间:2010年08月25日 21:50:06 作者:
项目需要做了如下的东西,希望能给其他需要的同学们一点参考。
有图如下:
代码如下:
/*
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();
}
}
});
},
};
代码如下:
复制代码 代码如下:
/*
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();
}
}
});
},
};
相关文章
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
言归正传:性能差异较大的机器运行结果会RT 出现大的差异,为了保险起见。还是推荐使用Array 来进行字符串拼接操作2012-05-05JavaScript 中使用SpreadJS导入和导出 Excel 文件的方法
这篇文章主要介绍了如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件,本文通过图文实例代码相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09DB.ASP 用Javascript写ASP很灵活很好用很easy
DB.ASP 用Javascript写ASP很灵活很好用很easy,喜欢用js写asp的朋友可以参考下。2011-07-07JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
这篇文章主要介绍了JavaScript实现写入文件到本地的方法,结合实例形式分析了基于FileSaver.js插件实现保存文件到本地的相关操作技巧,并附带FileSaver.js插件完整源码,需要的朋友可以参考下2018-03-03
最新评论