The Common tab effect is summarized before the plugin is written, and in general there are several effects. Plug-ins strive to be simple and easy to use, as long as the common functions can be achieved.
Parameter description:
Event
• Trigger tab event type, mouse hover: mouseover, mouse click: click, Default for MouseOver.
Timeout
• Event latency, in milliseconds, by default of 0.
Auto
• Auto switch, in milliseconds, defaults to 0.
Callback
• Callback function that executes when the tab is triggered, and the parameter of the function returns this.
HTML code
| The code is as follows |
Copy Code |
<div id=box>
<!--tab Menu Section--> <ul class=tab_menu> <li Class=current> News </LI>
<LI> Pictures </LI>
<LI> Military </LI>
</UL>
<!--tab Content Section-->
<div class=tab_box> <DIV> News </DIV>
<div class=hide> Pictures </DIV>
<div class=hide> Military </DIV>
</DIV>
</DIV>
|
CSS Style section:
| The code is as follows |
Copy Code |
<!--
. tab_menu{
List-style:none;
width:210px;
Overflow:hidden;
}
. Tab_menu li{
width:70px;height:30px;
line-height:30px;
Float:left;
Color: #fff;
Background: #093;
Text-align:center;
Cursor:pointer;
}
. Tab_menu li.current{
Color: #333;
Background: #fff;
}/*tab Menu Highlighting style * *
. tab_box{
padding:20px;
height:120px;
}
. Tab_box. hide{
Display:none;
}/* Hide tab Content Part * *
--> |
Invoke plug-in:
| The code is as follows |
Copy Code |
<script src= "Jquery.min.js" type= "Text/javascript" ></script>
<script src= "Jquery.tabs.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (' #box '). Tabs ({
Event: ' MouseOver ',//events type
TIMEOUT:100,//Set event Latency
auto:3000,//3 second Auto switch once
Callback:null//callback function
}); Returned this
});
</script> |
The complete example is as follows
| The code is as follows |
Copy Code |
| <! DOCTYPE html>
<meta charset= "GBK"/>
<title>jquery Tab Plugin </title>
<style>
* {
margin:0;
padding:0;
}
Body {
Background: #e3e3e3;
height:100%;
Font:normal normal 12px/24px "Microsoft Yahei", Arial;
padding-bottom:30px;
}
#title {width:300px;margin:3% auto 0;}
h1{font-size:18px;}
h6{font-size:12px; font-weight:normal; color: #333; margin-bottom:10px;}
H6 a {color: #09c;}
#wrapper {
width:300px;
margin:0 Auto;
Background: #f8f8f8;
border:1px solid #a3a3a3;
padding:20px 20px 50px;
border-radius:5px;-moz-border-radius:5px;
}
. box{width:210px;margin:10px Auto 0;background: #fff; border:1px solid #d3d3d3;}
. Tab_menu{list-style:none;width:210px;overflow:hidden;}
. Tab_menu Li{width:70px;float:left;height:30px;line-height:30px;color: #fff; background: #093; text-align:center; Cursor:pointer;}
. Tab_menu Li.current{color: #333; background: #fff;}
. tab_box{padding:20px;height:120px;}
. Tab_box. Hide{display:none;
H3{color: #333; font-size:14px;width:210px;margin:30px auto 0;}
</style>
<body>
<div id= "title" >
</div>
<div id= "wrapper" >
<div class= "box Demo1" >
<ul class= "Tab_menu" >
<li class= "Current" > News </li>
<li> Pictures </li>
<li> Military </li>
</ul>
<div class= "Tab_box" >
<div> News </div>
<div class= "Hide" > Pictures </div>
<div class= "Hide" > Military </div>
</div>
</div>
<div class= "box Demo2" >
<ul class= "Tab_menu" >
<li class= "Current" > News </li>
<li> Pictures </li>
<li> Military </li>
</ul>
<div class= "Tab_box" >
<div> News </div>
<div class= "Hide" > Pictures </div>
<div class= "Hide" > Military </div>
</div>
</div>
<div class= "box Demo3" >
<ul class= "Tab_menu" >
<li class= "Current" > News </li>
<li> Pictures </li>
<li> Military </li>
</ul>
<div class= "Tab_box" >
<div> News </div>
<div class= "Hide" > Pictures </div>
<div class= "Hide" > Military </div>
</div>
</div>
<div class= "box Demo4" >
<ul class= "Tab_menu" >
<li class= "Current" > News </li>
<li> Pictures </li>
<li> Military </li>
</ul>
<div class= "Tab_box" >
<div> News </div>
<div class= "Hide" > Pictures </div>
<div class= "Hide" > Military </div>
</div>
</div>
<div class= "box Demo5" >
<ul class= "Tab_menu" >
<li class= "Current" > News </li>
<li> Pictures </li>
<li> Military </li>
</ul>
<div class= "Tab_box" >
<div> News </div>
<div class= "Hide" > Pictures </div>
<div class= "Hide" > Military </div>
</div>
</div>
</div>
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script src= "Http://stylechen.com/wp-content/uploads/demo/jquery-tabs/jquery.tabs.js" ></script>
<script>
$ (function () {
$ ('. Demo1 '). Tabs ();
$ ('. Demo2 '). Tabs ({
Event: ' Click '
});
$ ('. Demo3 '). Tabs ({
timeout:300
});
$ ('. Demo4 '). Tabs ({
auto:3000
});
$ ('. Demo5 '). Tabs ({
Event: ' Click ',
Callback:tabcallback
});
function Tabcallback () {
Alert ("I am the callback function:)");
}
});
</script>
</body>
|
