GridTab is a lightweight jQuery plugin to create grid based responsive tabs.
http://gopalraju.github.io/gridtab
- Responsive
- Lightweight and based on CSS3 flexbox
- Set Grid for each breakpoint
- Switch between Grid and Tab layout
- Next, previous and close controls
- Scroll to current tab
- Custom selectors
- Right-To-Left Support
# Bower
bower install --save gridtab
# NPM
npm install gridtab
Setting up GridTab is really simple
Your markup should look something like this
<dl id="gridtab-1">
<dt>Tab 1</dt>
<dd>Tab 1 Description</dd>
<dt>Tab 2</dt>
<dd>Tab 2 Description</dd>
<dt>Tab 3</dt>
<dd>Tab 3 Description</dd>
<dt>Tab 4</dt>
<dd>Tab 4 Description</dd>
<dt>Tab 5</dt>
<dd>Tab 5 Description</dd>
<dt>Tab 6</dt>
<dd>Tab 6 Description</dd>
</dl>
Where, <dt> contains the title of the tab nad <dd> contains the description to be shown on click.
Just add a link to the css file in your :
<link rel="stylesheet" type="text/css" href="gridtab.min.css"/>
Then, before your closing <body> tag add:
<script type="text/javascript" src="gridtab.min.js"></script>
and initialize the plugin as shown below:
<script>
$(document).ready(function() {
$('#gridtab-1').gridtab({
grid:3
});
});
</script>
Where grid is the number of grids/tabs in a row
| Basic Settings | Type | Default | Description |
|---|---|---|---|
| grid | integer | 4 |
Number of grids or tabs per row |
| borderWidth | integer | 2 |
Width of the borders. |
| tabBorderColor | string | '#ddd' |
border color of the tabs (Hex Color Code). |
| tabPadding | integer | 25 |
padding/spacing around the tabs. |
| contentBorderColor | string | '#ddd' |
border color of the content section (Hex Color Code). |
| contentPadding | integer | 25 |
padding/spacing around content section. |
| contentBackground | string | '#fff' |
Background color for the content section (Hex Color Code). |
| activeTabBackground | string | '#fff' |
Background color for the active tab (Hex Color Code). |
| responsive | Array | null |
Array of objects having breakpoints and settings object which is enabled at a given breakpoint. |
| selectors | Object | see table below | Object with options to set custom selectors. |
| config | Object | see table below | Object with options to enable features like, setting initially active tab, next/prev controls, close button, transition speed etc. |
| callbacks | Object | open:false, close:false |
Callbacks for the open and close states of the content section. |
| selectors | Type | Default | Description |
|---|---|---|---|
| tab | string | '> dt' |
By default, the click event is triggered on the entire tab ('dt'). This can be replaced with any custom selector within the dt. For example: '.readmore'. |
| closeButton | string | '.gridtab__close' |
Custom class for the close button, if 'showClose' is set to true. |
| nextArrow | string | '.gridtab__next.gridtab__arrow' |
Custom class for the next button, if 'showArrows' is set to true. |
| prevArrow | string | '.gridtab__prev.gridtab__arrow' |
Custom class for the prev button, if 'showArrows' is set to true. |
| disabledArrow | string | '.is-disabled' |
Custom class for the disabled state of next/prev buttons, if 'showArrows' is set to true. |
| config | Type | Default | Description |
|---|---|---|---|
| layout | string | 'grid' |
Change the value to 'tab' for a tab layout. By default, the layout is 'grid' based. |
| keepOpen | Boolean | false |
If set to true keeps the active tab open (Disables toggle). |
| speed | integer | 500 |
Transition speed in milliseconds. |
| activeTab | integer | 0 |
Initially active tab. For example, 1 enables the first tab. |
| showClose | Boolean | false |
Shows the close button if set to true. |
| showArrows | Boolean | false |
Shows the next/prev buttons if set to true. |
| scrollToTab | Boolean | false |
Scrolls to the active tab on click |
| RTL | Boolean | false |
Converts tab to RTL |
The responsive settings is where you reset the grids and other properties at a given breakpoint.
$('#gridtab-1').gridtab({
grid:5,
contentPadding: 40,
responsive:[{
breakpoint: 1024,
settings:{
grid:3,
contentPadding: 30
}
},{
breakpoint:767,
settings:{
grid:2,
contentPadding: 25
}
},{
breakpoint:520,
settings:{
grid:1,
contentPadding: 20
}
}]
});
All properties under basic settings like: borderWidth, tabPadding, tabBorderColor, contentBorderColor, contentPadding, contentBackground and activeTabBackground, can be updated with the responsive settings.
2.1.1
GridTab works on IE10+ in addition to other modern browsers like Chrome, Firefox and Safari
jQuery 1.8.3 +
Licensed under the MIT license.