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
