gridtab

by gopalraju

gopalraju / gridtab

GridTab is a lightweight jQuery plugin to create grid based responsive tabs https://gopalraju.github...

210 Stars 23 Forks Last release: almost 4 years ago (v2.1.1) MIT License 9 Commits 3 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

GridTab jQuery Plugin

GridTab is a lightweight jQuery plugin to create grid based responsive tabs.

Demo

http://gopalraju.github.io/gridtab

Features

  • 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

Package Managers

# Bower
bower install --save gridtab

NPM

npm install gridtab

Usage

Setting up GridTab is really simple

HTML Markup

Your markup should look something like this

Tab 1
Tab 1 Description
Tab 2
Tab 2 Description
Tab 3
Tab 3 Description
Tab 4
Tab 4 Description
Tab 5
Tab 5 Description
Tab 6
Tab 6 Description

Where,

contains the title of the tab nad

contains the description to be shown on click.

Stylesheet

Just add a link to the css file in your

:



jQuery Plugin

Then, before your closing

 tag add:



and initialize the plugin as shown below:


Where grid is the number of grids/tabs in a row

Settings

| 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|

Responsive Example

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.

Version

2.1.1

Browser support

GridTab works on IE10+ in addition to other modern browsers like Chrome, Firefox and Safari

Dependencies

jQuery 1.8.3 +

License

Licensed under the MIT license.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.