Javascript browser tab Effect
Last Update:2018-12-08
Source: Internet
Author: User
See the figure below:
Code As follows:
Copy code The 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 ();
}
}
});
},
};