JavaScript浏览器选项卡效果
JavaScript浏览器选项卡效果
发布时间:2016-12-30 来源:查字典编辑
摘要:有图如下:代码如下:复制代码代码如下:/*headhtml:bodyhtml:*/varTab=function(id,title,url,...

有图如下:

JavaScript浏览器选项卡效果1

代码如下:

复制代码 代码如下:

/*

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>' + this.title +'</span>');

this.body = jQuery('<iframe name="ifm' + this.id +'" src="' + this.url +'" frameborder=0></iframe>').hide();

isClose && (this.close = jQuery('<span>×</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></div>');

this.body = jQuery('<div></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教程学习
编程开发子分类