Skip to content

Commit b329b61

Browse files
gopalrajugopalraju
committed
Version 2.0.0 release, includes 'nested tabs' support and features like custom selectors, show close button, show next/prev controls, scroll to tab etc.
1 parent 4f5eb44 commit b329b61

File tree

8 files changed

+597
-258
lines changed

8 files changed

+597
-258
lines changed

‎README.md

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# GridTab jQuery Plugin #
22

33

4-
**GridTab** is a lightweight jQuery plugin to create grid based responsive tabs.
4+
**GridTab** is a lightweight jQuery plugin to create grid based responsive tabs. With version 2.0.0, gridtab supports nested tabs.
55

66
## Demo ##
77

@@ -56,22 +56,40 @@ and initialize the plugin as shown below:
5656
Where grid is the number of grids/tabs in a row
5757

5858
## Settings ##
59-
| Option | Type | Default | Description |
60-
| ------------- | ------------- | -------- | ----------- |
61-
| grid | integer | 4 | Number of grids or tabs per row |
62-
| borderWidth | integer | 2 | Width of the borders |
63-
| tabBorderColor | string | '#ddd' | border color of the tabs (Hex Color Code).|
64-
| tabPadding | integer | 25 | padding/spacing around the tabs.
65-
| contentBorderColor | string | '#ddd' | border color of the content section (Hex Color Code).|
66-
| contentPadding | integer | 25 | padding/spacing around content section|
67-
| contentBackground | string | '#fff' | Background color for the content section (Hex Color Code).|
68-
| activeTabBackground| string | '#fff' | Background color for the active tab (Hex Color Code).|
69-
| keepOpen | Boolean | false | If set to `true` keeps the active tab open (Disables toggle).|
70-
| speed | integer | 500 | Transition speed in milliseconds|
71-
| layout | string | 'grid' | Change the value to `'tab'` for a tab layout. By default, the layout is `'grid'` based.|
72-
| activeTab | integer | 0 | Initially active tab. For example, `1` enables the first tab.|
73-
| Responsive | Array | null | Array of objects having breakpoints and `settings` object which is enabled at a given `breakpoint`.|
74-
| callbacks | Object | open:false, close:false| Callbacks for the open and close states of the content section.|
59+
| Basic Settings | Type | Default | Description |
60+
| ------------- | ------------- | -------- | ----------- |
61+
| grid | integer | `4` | Number of grids or tabs per row |
62+
| borderWidth | integer | `2` | Width of the borders.|
63+
| tabBorderColor | string | `'#ddd'` | border color of the tabs (Hex Color Code).|
64+
| tabPadding | integer | `25` | padding/spacing around the tabs.
65+
| contentBorderColor | string | `'#ddd'` | border color of the content section (Hex Color Code).|
66+
| contentPadding | integer | `25` | padding/spacing around content section.|
67+
| contentBackground | string | `'#fff'` | Background color for the content section (Hex Color Code).|
68+
| activeTabBackground| string | `'#fff'` | Background color for the active tab (Hex Color Code).|
69+
| responsive | Array | `null` | Array of objects having breakpoints and `settings` object which is enabled at a given `breakpoint`.|
70+
| selectors | Object | see table below | Object with options to set custom selectors.|
71+
| config | Object | see table below | Object with options to enable features like, setting initially active tab, next/prev controls, close button, transition speed etc.|
72+
| callbacks | Object | `open:false, close:false` | Callbacks for the open and close states of the content section.|
73+
74+
75+
| selectors | Type | Default | Description |
76+
| ------------- | ------------- | -------- | ----------- |
77+
| 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'`.|
78+
| closeButton | string | `'.gridtab__close'` | Custom class for the close button, if `'showClose'` is set to `true`.|
79+
| nextArrow | string | `'.gridtab__next.gridtab__arrow'` | Custom class for the next button, if `'showArrows'` is set to `true`. |
80+
| prevArrow | string | `'.gridtab__prev.gridtab__arrow'` | Custom class for the prev button, if `'showArrows'` is set to `true`. |
81+
| disabledArrow | string | `'.is-disabled'` | Custom class for the disabled state of next/prev buttons, if `'showArrows'` is set to `true`. |
82+
83+
| config | Type | Default | Description |
84+
| ------------- | ------------- | -------- | ----------- |
85+
| layout | string | `'grid'` | Change the value to `'tab'` for a tab layout. By default, the layout is `'grid'` based. |
86+
| keepOpen | Boolean | `false` | If set to `true` keeps the active tab open (Disables toggle).|
87+
| speed | integer | `500` | Transition speed in milliseconds.|
88+
| activeTab | integer | `0` | Initially active tab. For example, `1` enables the first tab.|
89+
| showClose | Boolean | `false` | Shows the close button if set to `true`.|
90+
| showArrows | Boolean | `false` | Shows the next/prev buttons if set to `true`.|
91+
| scrollToTab | Boolean | `false` | Scrolls to the active tab on click|
92+
7593

7694
### Responsive Example ###
7795
The responsive settings is where you reset the grids and other properties at a given breakpoint.
@@ -101,10 +119,11 @@ $('#gridtab-1').gridtab({
101119
}]
102120
});
103121
```
104-
The properties that can be changed with the responsive settings are: `borderWidth`, `tabPadding`, `tabBorderColor`, `contentBorderColor`, `contentPadding`, `contentBackground` and `activeTabBackground`.
122+
All properties under basic settings like: `borderWidth`, `tabPadding`, `tabBorderColor`, `contentBorderColor`, `contentPadding`, `contentBackground` and `activeTabBackground`, can be updated with the responsive settings.
123+
105124
## Version ##
106125

107-
1.0.0
126+
2.0.0
108127
## Browser support ##
109128

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

‎gridtab.jquery.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"accordion",
1010
"navigation"
1111
],
12-
"version": "1.0.0",
12+
"version": "2.0.0",
1313
"author": {
1414
"name": "Gopal Raju",
1515
"url": "http://gopalraju.github.io"
@@ -21,7 +21,7 @@
2121
}],
2222
"licenses": [{
2323
"type": "MIT",
24-
"url": "https://github.com/kenwheeler/slick/blob/master/LICENSE"
24+
"url": "https://github.com/gopalraju/gridtab/blob/master/LICENSE"
2525
}],
2626
"demo": "http://gopalraju.github.io/gridtab/",
2727
"bugs": "https://github.com/gopalraju/gridtab/issues",

‎gridtab/gridtab.css

Lines changed: 70 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* GridTab */
1+
/* GridTab v2.0.0*/
22

33
.gridtab,
44
.gridtab>dt,
@@ -20,9 +20,6 @@
2020
justify-content: flex-start;
2121
box-sizing: border-box
2222
}
23-
.gridtab .is-disabled {
24-
pointer-events: none
25-
}
2623
.gridtab * {
2724
box-sizing: border-box
2825
}
@@ -34,6 +31,71 @@
3431
-ms-flex-preferred-size: 100%;
3532
flex-basis: 100%
3633
}
34+
.gridtab>dd>.gridtab__controls {
35+
position: absolute;
36+
right: 5px;
37+
top: 5px;
38+
display: -webkit-flex;
39+
display: -ms-flexbox;
40+
display: flex
41+
}
42+
.gridtab>dd>.gridtab__controls>.gridtab__close:before,
43+
.gridtab>dd>.gridtab__controls>.gridtab__close:after {
44+
top: 50%;
45+
left: 50%;
46+
-webkit-transform: translate(-50%, -50%) rotate(45deg);
47+
transform: translate(-50%, -50%) rotate(45deg)
48+
}
49+
.gridtab>dd>.gridtab__controls>.gridtab__close:after {
50+
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
51+
transform: translate(-50%, -50%) rotate(-45deg)
52+
}
53+
.gridtab>dd>.gridtab__controls>.gridtab__arrow,
54+
.gridtab>dd>.gridtab__controls>.gridtab__close {
55+
display: block;
56+
width: 25px;
57+
height: 25px;
58+
overflow: hidden;
59+
background: #666;
60+
text-indent: -999px;
61+
position: relative
62+
}
63+
.gridtab>dd>.gridtab__controls>.gridtab__arrow:before,
64+
.gridtab>dd>.gridtab__controls>.gridtab__arrow:after,
65+
.gridtab>dd>.gridtab__controls>.gridtab__close:before,
66+
.gridtab>dd>.gridtab__controls>.gridtab__close:after {
67+
position: absolute;
68+
width: 3px;
69+
height: 13px;
70+
content: '';
71+
display: block;
72+
background: #FFF
73+
}
74+
.gridtab>dd>.gridtab__controls>.gridtab__arrow:before,
75+
.gridtab>dd>.gridtab__controls>.gridtab__arrow:after {
76+
top: 50%;
77+
left: 50%;
78+
-webkit-transform: rotate(45deg);
79+
transform: rotate(45deg);
80+
-webkit-transform-origin: right;
81+
transform-origin: right;
82+
margin: -7px 0 0 -3px;
83+
height: 10px
84+
}
85+
.gridtab>dd>.gridtab__controls>.gridtab__arrow:after {
86+
margin-top: -4px;
87+
-webkit-transform: rotate(-45deg);
88+
transform: rotate(-45deg)
89+
}
90+
.gridtab>dd>.gridtab__controls>.gridtab__arrow.is-disabled {
91+
opacity: .25
92+
}
93+
.gridtab>dd>.gridtab__controls>.gridtab__next {
94+
-webkit-transform: scale(-1);
95+
transform: scale(-1);
96+
-webkit-transform-origin: center;
97+
transform-origin: center
98+
}
3799
.gridtab>dt {
38100
transition: background 1s;
39101
background: #f2f2f2
@@ -44,10 +106,13 @@
44106
left: 0;
45107
right: 0
46108
}
109+
.gridtab>dt.is-disabled {
110+
pointer-events: none
111+
}
47112
.gridtab>dt.is-active {
48113
z-index: 2
49114
}
50-
.gridtab>dt img {
115+
.gridtab>dt>img {
51116
max-width: 100%;
52117
float: left
53118
}

0 commit comments

Comments
 (0)