There are many websites that use the multi-tab feature in the Web, such as 163 and 126 mailboxes. I have encountered this in so many similar plug-ins and it takes some time to debug the plug-ins. Please refer:
This plug-in is called jqueryMagicTabs and implements basic functions, such as adding a tab and selecting a specified tab. When the length of the added tab exceeds a certain length, a sliding button appears, and you can also move the tab.
The Code is as follows:
Copy codeThe Code is as follows:
<% @ Page language = "java" contentType = "text/html; charset = UTF-8"
PageEncoding = "UTF-8" %>
<! DOCTYPE html PUBLIC "-// W3C // DTDHTML 4.01 Transitional //" http://www.w3.org/TR/html4/loose.dtd ">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> basic usage of MagicTabs </title>
<Link href = "./css/default.css" type = "text/css" rel = "stylesheet">
<Link href = "./css/tabs.css" type = "text/css" rel = "stylesheet">
<Script type = "text/javascript" src = "./js/jquery. js"> </script>
<Script type = "text/javascript" src = "./js/cn. js"> </script>
<Script type = "text/javascript" src = "./js/core. js"> </script>
<Script type = "text/javascript" src = "./js/ui. js"> </script>
<Script type = "text/javascript" src = "./js/global. js"> </script>
<Script type = "text/javascript" src = "./js/mousewheel. js"> </script>
<Script type = "text/javascript" src = "./js/tab/tabs. js"> </script>
<Script type = "text/javascript" src = "./js/ga. js"> </script>
<Script type = "text/javascript">
$ (Function (){
Var dd = [], I = 0;
For (I = 0; I <10; I ++ ){
Var a = {
Code: 'tab' + I,
Title: 'tab '+ I,
Closeable: I> 0,
El: 'tab '+ I // You can put anything here
};
Dd. push ();
}
Var tabs = $ ('. tabs ');
Tabs. mac ('tabs ',{
TabWidth: 80, // Use fix width
Items: dd,
OnCloseTab: function (me, c, ){
TnCbx. find ('[value =' + c + ']'). remove ();
Return true;
}
}). SelectFirst ();
Var thd = tabs. children ('. head'), thm = thd. children ('. main ');
Thd. mousewheel (function (e, delta, deltaX, deltaY ){
Thm. scrollLeft (thm. scrollLeft ()-deltaY * 40 );
Return false;
});
// Switch the Selected tab
Var tnCbx = $ ('# tabNoCbx'). change (function (){
Tabs. select ($ (this). val ());
});
App. options (tnCbx ,{
Data: dd,
KeyField: 'code ',
Render: function (r ){
Return r. title;
}
});
// Add a tab
Var atBtn = $ ('# addTabBtn'). click (function (){
Var a = tabs. addTab ({
Code: 'tab' + I,
Title: 'tab '+ I,
Closeable: I> 0,
El: 'tab '+ I // You can put anything here
});
Tabs. select ('tab '+ I );
TnCbx. append ('<optionvalue = "tab'
+ I + '"> tab' + I + '</option> ');
I ++;
});
});
</Script>
<Style type = "text/css">
# Demo {
Position: absolute;
Width: 600px;
Height: 400px;
Top: 50px;
Left: 200px;
}
</Style>
</Head>
<Body>
<Div id = "demo">
<Div class = "toolbar">
<Div class = "item" id = "txt"> select: </div>
<Div class = "item"> <select id = "tabNoCbx" style = "margin: 2px;"> </select> </div>
<Div class = "sqrt"> </div>
<Div class = "itembutton" id = "addTabBtn"> Add a tab </div>
</Div>
<Div class = "clear"> </div>
<Div class = "tabs" style = "height: margin PX; margin: 4px;"> </div>
</Div>
</Body>
</Html>
The project directory is as follows:
This plug-in is http://boarsoft.com/cn/. there are many excellent plug-ins in it. you can exercise your interest in it.