There are figures as follows:
The code is as follows:
Copy Code code 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" ></ifram E> '). Hide ();
Isclose && (this.close = JQuery (' <span class= "tab-head-closebtn" >x</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) {//If the current tab is turned off
if (self.tabs.length==0) {//If all tabs are turned off
Self.destory ();
}else{
var nextindex = self.tabs.length==i? I-1: i;
Self.focustab = Self.tabs[nextindex];
Self.focusTab.getFocus ();
}
}
});
},
};