See the figure below:
The Code is as follows:
Copy codeThe Code is as follows:
/*
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>... </div>
Body html: <div> <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) {// if the current tab is closed
If (self. tabs. length = 0) {// if all tabs are closed
Self. destory ();
} Else {
Var nextIndex = self. tabs. length = I? I-1: I;
Self. focusTab = self. tabs [nextIndex];
Self. focusTab. getFocus ();
}
}
});
},
};