Responsive Expanding Grid / Tab Layout Plugin For jQuery - Gridtab
File Size: | 14.7 KB |
---|---|
Views Total: | 5276 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Gridtab is a tiny jQuery plugin for creating responsive grid or tab layouts which allow the user to expand / hide web content by clicking on their corresponding grid/tab items.
How to use it:
1. Import the required style sheet gridtab.css
as this:
<link rel="stylesheet" href="gridtab.css">
2. Create your grid / tab content using HTML description list tags: dl
, dt
and dd
.
<dl class="gridtab-demo"> <dt><img src="http://placehold.it/350x300?text=1"></dt> <dd>Content 1</dd> <dt><img src="http://placehold.it/350x300?text=2"></dt> <dd>Content 2</dd> <dt><img src="http://placehold.it/350x300?text=3"></dt> <dd>Content 3</dd> ... </dl>
3. Place the plugin's JavaScript file gridtab.js
after jQuery library but before you close the body
.
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script src="gridtab.min.js"></script>
4. Initialize the plugin to convert the description list into a responsive grid layout.
$('.gridtab-demo').gridtab({ grid: 6, layout: 'grid' });
5. Initialize the plugin to convert the description list into a responsive tab layout.
$('.gridtab-demo').gridtab({ grid: 6, layout: 'tab' });
6. Config the layout at different screen sizes.
$('.gridtab-demo').gridtab({ grid: 6, layout: 'grid', responsive: [{ breakpoint: 991, settings: { grid: 4, contentPadding: 30 } }, { breakpoint: 767, settings: { grid: 3, contentPadding: 20 } }, { breakpoint: 520, settings: { grid: 2, contentPadding: 20 } }] });
7. All default configuration options to customize your layout.
$('SELECTOR').gridtab({ // how many items per row grid: 4, // border width borderWidth: 2, // border color tabBorderColor: "#ddd", // space between tabs tabPadding: 25, // color of content border contentBorderColor: "#ddd", // content padding contentPadding: 35, // background color of content contentBackground: "#fff", // background color of active tab activeTabBackground: "#fff", // selectors selectors: { tab: '>dt', closeButton: '.gridtab__close', nextArrow: '.gridtab__next.gridtab__arrow', prevArrow: '.gridtab__prev.gridtab__arrow', disabledArrow: '.is-disabled' }, config: { layout: 'grid', 'grid' or 'tab' keepOpen: false, // always open speed: 500, // animation speed activeTab: 0, // active tab index showClose: false, showArrows: false, scrollToTab:false, rtl:false }, // for responsive responsive: null, // callbacks callbacks: { open: false, close: false } });
Change log:
v2.1.1 (2016-12-01)
- added RTL support.
v2.0.1 (2016-11-30)
- JS update
v2.0.0 (2016-11-29)
- added nested tabs support
- custom selectors
- show close button
- show next/prev controls
- scroll to tab
This awesome jQuery plugin is developed by gopalraju. For more Advanced Usages, please check the demo page or visit the official website.