Version 2.0.0 release, includes 'nested tabs' support and features li…

…ke custom selectors, show close button, show next/prev controls, scroll to tab etc.
gopalraju · Nov 28, 2016 · b329b61 · b329b61
1 parent 4f5eb44
commit b329b61
Show file tree

Hide file tree

Showing 8 changed files with 597 additions and 258 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # GridTab jQuery Plugin #
 
 
-**GridTab** is a lightweight jQuery plugin to create grid based responsive tabs.
+**GridTab** is a lightweight jQuery plugin to create grid based responsive tabs. With version 2.0.0, gridtab supports nested tabs.
 
 ## Demo ##
 
@@ -56,22 +56,40 @@ and initialize the plugin as shown below:
 Where grid is the number of grids/tabs in a row
 
 ## Settings ##
-| Option             | 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).|
-| keepOpen           | Boolean       |  false   | If set to `true` keeps the active tab open (Disables toggle).|
-| speed              | integer       |  500     | Transition speed in milliseconds|
-| layout             | string        |  'grid'  | Change the value to `'tab'` for a tab layout. By default, the layout is `'grid'` based.|
-| activeTab          | integer       |  0       | Initially active tab. For example, `1` enables the first tab.|
-| Responsive         | Array         |  null    | Array of objects having breakpoints and `settings` object which is enabled at a given `breakpoint`.|
-| callbacks          | Object        |  open:false, close:false| Callbacks for the open and close states of the content section.|
+| 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|
+
 
 ### Responsive Example ###
 The responsive settings is where you reset the grids and other properties at a given breakpoint.
@@ -101,10 +119,11 @@ $('#gridtab-1').gridtab({
 	}]
 });
 ```
-The properties that can be changed with the responsive settings are: `borderWidth`, `tabPadding`, `tabBorderColor`, `contentBorderColor`, `contentPadding`, `contentBackground` and `activeTabBackground`.
+All properties under basic settings like: `borderWidth`, `tabPadding`, `tabBorderColor`, `contentBorderColor`, `contentPadding`, `contentBackground` and `activeTabBackground`, can be updated with the responsive settings.
+
 ## Version ##
 
-1.0.0
+2.0.0
 ## Browser support ##
 
 GridTab works on IE10+ in addition to other modern browsers like Chrome, Firefox and Safari

diff --git a/gridtab.jquery.json b/gridtab.jquery.json
@@ -9,7 +9,7 @@
         "accordion",
         "navigation"
     ],
-    "version": "1.0.0",
+    "version": "2.0.0",
     "author": {
         "name": "Gopal Raju",
         "url": "http://gopalraju.github.io"
@@ -21,7 +21,7 @@
     }],
     "licenses": [{
         "type": "MIT",
-        "url": "https://github.com/kenwheeler/slick/blob/master/LICENSE"
+        "url": "https://github.com/gopalraju/gridtab/blob/master/LICENSE"
     }],
     "demo": "http://gopalraju.github.io/gridtab/",
     "bugs": "https://github.com/gopalraju/gridtab/issues",

diff --git a/gridtab/gridtab.css b/gridtab/gridtab.css
@@ -1,4 +1,4 @@
-/* GridTab */
+/* GridTab v2.0.0*/
 
 .gridtab,
 .gridtab>dt,
@@ -20,9 +20,6 @@
     justify-content: flex-start;
     box-sizing: border-box
 }
-.gridtab .is-disabled {
-    pointer-events: none
-}
 .gridtab * {
     box-sizing: border-box
 }
@@ -34,6 +31,71 @@
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%
 }
+.gridtab>dd>.gridtab__controls {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex
+}
+.gridtab>dd>.gridtab__controls>.gridtab__close:before,
+.gridtab>dd>.gridtab__controls>.gridtab__close:after {
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%) rotate(45deg);
+    transform: translate(-50%, -50%) rotate(45deg)
+}
+.gridtab>dd>.gridtab__controls>.gridtab__close:after {
+    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
+    transform: translate(-50%, -50%) rotate(-45deg)
+}
+.gridtab>dd>.gridtab__controls>.gridtab__arrow,
+.gridtab>dd>.gridtab__controls>.gridtab__close {
+    display: block;
+    width: 25px;
+    height: 25px;
+    overflow: hidden;
+    background: #666;
+    text-indent: -999px;
+    position: relative
+}
+.gridtab>dd>.gridtab__controls>.gridtab__arrow:before,
+.gridtab>dd>.gridtab__controls>.gridtab__arrow:after,
+.gridtab>dd>.gridtab__controls>.gridtab__close:before,
+.gridtab>dd>.gridtab__controls>.gridtab__close:after {
+    position: absolute;
+    width: 3px;
+    height: 13px;
+    content: '';
+    display: block;
+    background: #FFF
+}
+.gridtab>dd>.gridtab__controls>.gridtab__arrow:before,
+.gridtab>dd>.gridtab__controls>.gridtab__arrow:after {
+    top: 50%;
+    left: 50%;
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+    -webkit-transform-origin: right;
+    transform-origin: right;
+    margin: -7px 0 0 -3px;
+    height: 10px
+}
+.gridtab>dd>.gridtab__controls>.gridtab__arrow:after {
+    margin-top: -4px;
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg)
+}
+.gridtab>dd>.gridtab__controls>.gridtab__arrow.is-disabled {
+    opacity: .25
+}
+.gridtab>dd>.gridtab__controls>.gridtab__next {
+    -webkit-transform: scale(-1);
+    transform: scale(-1);
+    -webkit-transform-origin: center;
+    transform-origin: center
+}
 .gridtab>dt {
     transition: background 1s;
     background: #f2f2f2
@@ -44,10 +106,13 @@
     left: 0;
     right: 0
 }
+.gridtab>dt.is-disabled {
+    pointer-events: none
+}
 .gridtab>dt.is-active {
     z-index: 2
 }
-.gridtab>dt img {
+.gridtab>dt>img {
     max-width: 100%;
     float: left
 }