https://github.com/kennethanceyer/pg-tab

:sparkles: web accessibility be supported a responsible tab plugin.
https://github.com/kennethanceyer/pg-tab

accessibility component html5 jquery jquery-plugin pretty tab tab-plugin ui-components

Last synced: 2 months ago
JSON representation

:sparkles: web accessibility be supported a responsible tab plugin.

• Host: GitHub
• URL: https://github.com/kennethanceyer/pg-tab
• Owner: KennethanCeyer
• License: mit
• Created: 2014-03-31T06:33:14.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2017-06-13T15:11:04.000Z (over 7 years ago)
• Last Synced: 2024-04-14T22:13:51.927Z (9 months ago)
• Topics: accessibility, component, html5, jquery, jquery-plugin, pretty, tab, tab-plugin, ui-components
• Language: HTML
• Homepage: http://www.pigno.se/barn/PIGNOSE-Tab/
• Size: 2.8 MB
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
PIGNOSE Tab

==

[![npm version](https://badge.fury.io/js/pg-tab.svg)](https://badge.fury.io/js/pg-tab) [![Bower version](https://badge.fury.io/bo/pg-tab.svg)](https://badge.fury.io/bo/pg-popup) [![Join the chat at https://gitter.im/KennethanCeyer/PIGNOSE](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/KennethanCeyer/PIGNOSE?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

----

- [See demo](http://www.pigno.se/barn/PIGNOSE-Tab/)

 

Web accessibility be supported a responsible tab plugin.

 

![Screenshot Main](http://www.pigno.se/barn/PIGNOSE-Tab/demo/img/screenshot_main.png)

- This plugin supports the ```web accessibility``` perfectly

- And also supports CSS animation.

- You can choice themes very easily.

## Getting started

### Overview

1. Normal Tab

2. Sub Tab

3. Multiple depth Tab

4. Article Tab

5. Styled Tab

6. Response Tab

7. Mobile Tab

### Installation

1. Download or Clone this repository.

2. Import `jquery.js 1.11.x higher`, `dist/pignose.tab.min.js`, and `dist/pignose.tab.min.css` in your head element.

 ```html

 ```

3. Insert a snippet code as follows.

 ```javascript

 $({selector}).pignoseTab();

 ```

### Options

| Option           | Default      | Values                    | Description                                           |

|:--------------------|:-------------|:--------------------------|:------------------------------------------------------|

| callback        | null         | function                  | If tab button is clicked, this callback will called.    |

| animation       | static       | static, true, false       | You can trun on/off animation to set this property, false mean `static`. |

| children        | string       | .sub-tab                  |	If you use sub tab, you need to choose children's class name. |

| animationTime   | 300          | Millisecond time          | This option can set animation time. ```(ms)``` |

| animationEasing |easeInOutCubic| Easing names              | You can use jQuery animation easing. |

----

### Question

If you found something problem of this plugin, or you have some question.

Please send me a message to use either [gitter](https://gitter.im/KennethanCeyer/PIGNOSE) or [Github issue](https://github.com/KennethanCeyer/PIGNOSE-Tab/issues). (gitter url is on the top of the manual)