This time I will share jQuery Plugin and tutorial about Accessible Responsive jQuery Tabs Plugin – Skeletabs, hope it will help you in programming stack.
Skeletabs is a full-featured jQuery tabs plugin for creating a responsive, accessible, customizable tab structure to switch between different sections of content.
Key features:
- Fully accessible with keyboard interactions.
- Fully responsive for small screen devices.
- Autoplay.
- Dark and Light themes.
- Auto updates URL hashtags.
- 4 CSS3 animations: “fade”, “fade-scale”, “drop”, “rotate”.
- Equalizes the height of content sections.
- Custom trigger events: ‘Click’ or ‘hover’.
Basic usage:
1. Include the stylesheet skeletabs.min.css
in the head
, and the JavaScript file skeletabs.min.js
at the bottom of the webpage.
03 |
< link href = "skeletabs.min.css" rel = "stylesheet" > |
08 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
09 |
< script src = "dist/skeletabs.min.js" ></ script > |
2. The html structure for the tabs and tabbed panels.
03 |
< ul class = "skltbs-tab-group" > |
05 |
< li class = "skltbs-tab-item" > |
07 |
< button class = "skltbs-tab" >{{Tab 1}}</ button > |
09 |
< li class = "skltbs-tab-item" > |
10 |
< button class = "skltbs-tab" >{{Tab 2}}</ button > |
14 |
< div class = "skltbs-panel-group" > |
16 |
< div class = "skltbs-panel" >{{Panel 1}}</ div > |
17 |
< div class = "skltbs-panel" >{{Panel 2}}</ div > |
3. Initialize the tabs plugin with default settings.
1 |
$( '#container' ).skeletabs(); |
4. Or auto-init the tabs plugin by add the data-skeletabs
attribute to the top container.
7 |
< div data-skeletabs data-skeletabs = '{ "autoplay": true, "panelHeight": "adaptive" }' > |
5. Apply the Light or Dark theme to the tabs plugin.
2 |
< div class = "skltbs-theme-light" > |
7 |
< div class = "skltbs-theme-dark" > |
6. Apply a transition effect to the tabs plugin.
02 |
< div class = "use-fade" > |
07 |
< div class = "use-fade-toggle" > |
12 |
< div class = "use-drop" > |
17 |
< div class = "use-rotate" > |
7. All default settings to customize the tabs plugin.
01 |
$( "#container" ).skeletabs({ |
05 |
autoplayInterval: 3000, |
13 |
breakpointLayout: 'accordion ', |
21 |
// ' replace ' | ' push ' | false |
24 |
// ' select ' | ' focus ' | false |
27 |
keyboardTabs: ' horizontal ', |
29 |
// ' auto ' | ' equal ' | ' adaptive ' |
32 |
// resize timeout in ms |