https://github.com/alecrust/jquery-tabs
@simonsmith's No frills tabs plugin, suitable for responsive design
https://github.com/alecrust/jquery-tabs
Last synced: 3 months ago
JSON representation
@simonsmith's No frills tabs plugin, suitable for responsive design
- Host: GitHub
- URL: https://github.com/alecrust/jquery-tabs
- Owner: AlecRust
- Created: 2012-11-07T14:00:06.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2012-11-07T14:01:29.000Z (over 13 years ago)
- Last Synced: 2025-01-17T22:22:33.125Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 73.2 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jQuery Tabs
No frills tab switcher thingy. Focus on small file size and touchevent support
## Usage
Two ways:
__AMD Style__ (better!)
```js
require(['path/to/Tabs'], function(Tabs) {
new Tabs('.some-container', {
// options
})
});
```
Ensure you have set a path to `jquery` in `require.config` (but you knew that already!)
__Standard Style__ (less awesome)
```js
$.tabs('.some-container', {
// options
});
```
Doesn't really follow the traditional jQuery plugin style, but I prefer AMD so this was just a quick addition for non-AMD users :)
## Methods
`setTab` - Pass it an index (zero based) to set that tab to visible
```js
var tabs = $.tabs('.container');
tabs.setTabs(2);
```
## Options
```js
{
// Current visible tab (applied to nav and tab item
currentClass: 'tab-current',
// Is the script active? Useful for applying display: none in
// an accessible manner
activeClass: 'js-tabs-active',
// Called every time a tab changes. Passes the current selected nav
// and the current showing item
onShow: function(currentNav, currentItem) {
},
// Which tab to start open
activeTab: 0,
// Elements to use (navTabs assumes there will be an element present)
selectors: {
navTabs: '.tab-nav li',
contentItems: '.tab-item'
}
}
```
## Markup Example
The script pretty much only cares about selectors, so extra divs here and there won't break things. The following markup would be ideal:
```html
```
## Demo
http://jsfiddle.net/Blink/kRTX3/