This time I will share jQuery Plugin and tutorial about Tiny Reusable jQuery Tabs Plugin – Ublue Tabs, hope it will help you in programming stack.
File Size: | 15.1 KB |
---|---|
Views Total: | 1071 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Ublue is an reusable, ultra-small and easy-to-customize jQuery tabs plugin that works both with mouse hover and mouse click events.
How to use it:
1. Create tab navigation and tab panels using unordered html lists.
01 |
< div class = "tabs" > |
02 |
< ul class = "tabsTit" > |
03 |
< li class = "tabsTab tabsHover" >Title1</ li > |
04 |
< li class = "tabsTab" >Title2</ li > |
05 |
< li class = "tabsTab" >Title3</ li > |
06 |
</ ul > |
07 |
< ul class = "tabsCon" > |
08 |
< li class = "tabsList" readonly = "true" >Content1</ li > |
09 |
< li class = "tabsList" >Content2</ li > |
10 |
< li class = "tabsList" >Content3</ li > |
11 |
</ ul > |
12 |
</ div > |
2. Load jQuery library along with the jQuery Ublue Tabs plugin at the end of your html document.
1 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
2 |
< script src = "js/Ublue-jQueryTabs-1.2.js" ></ script > |
3. The default CSS styles for the tabs component.
01 |
.tabs { |
02 |
width : 400px ; |
03 |
height : 160px ; |
04 |
margin : 40px auto ; |
05 |
border : 3px solid #333 ; |
06 |
} |
07 |
08 |
.tabsTit, .tabsCon { overflow : hidden ; } |
09 |
10 |
.tabsTit { |
11 |
text-align : center ; |
12 |
color : #B3AAB4 ; |
13 |
} |
14 |
15 |
.tabsTit li { |
16 |
float : left ; |
17 |
width : 100px ; |
18 |
height : 28px ; |
19 |
line-height : 28px ; |
20 |
cursor : pointer ; |
21 |
background : #262626 ; |
22 |
border-bottom : 2px solid #666666 ; |
23 |
} |
24 |
25 |
.tabsTit .tabsHover { |
26 |
background : #1E1E1E ; |
27 |
border-bottom : 2px solid #A11E22 ; |
28 |
} |
29 |
30 |
.tabsCon { |
31 |
width : 400px ; |
32 |
height : 130px ; |
33 |
background : black ; |
34 |
color : #B3AAB4 ; |
35 |
} |
36 |
37 |
.tabsCon li { |
38 |
width : 380px ; |
39 |
height : 110px ; |
40 |
padding : 10px ; |
41 |
} |
4. Initialize the plugin and done.
1 |
$( ".tabs" ).UblueTabs(); |
5. The default configuration options.
01 |
$( ".tabs" ).UblueTabs({ |
02 |
03 |
// CSS classes |
04 |
tabsTit: ".tabsTit" , |
05 |
tabsTab: ".tabsTab" , |
06 |
tabsCon: ".tabsCon" , |
07 |
tabsList: ".tabsList" , |
08 |
tabsHover: "tabsHover" , |
09 |
10 |
// 'hover' or 'click' |
11 |
eventType: "hover" |
12 |
|
13 |
}); |
This awesome jQuery plugin is developed by zhonglimh. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net