https://github.com/niksy/kist-tabify

Simple tabs and accordion interface.
https://github.com/niksy/kist-tabify

Last synced: about 2 months ago
JSON representation

Simple tabs and accordion interface.

• Host: GitHub
• URL: https://github.com/niksy/kist-tabify
• Owner: niksy
• License: mit
• Created: 2014-08-16T13:19:21.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2017-04-25T21:40:53.000Z (over 7 years ago)
• Last Synced: 2024-10-18T04:04:35.473Z (2 months ago)
• Language: JavaScript
• Size: 54.7 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# kist-tabify

Simple tabs and accordion interface.

## Installation

```sh

npm install kist-tabify --save

bower install kist-tabify --save

```

## API

### `$Element.tabify([options], [placement])`

Returns: `jQuery`

Element is container for tabs and corresponding panes. If panes can’t be found inside element, plugin will search for them outside container, beginning with `body` element.

#### options

Type: `Object|String`

##### Options defined as `Object`

###### type

Type: `String`  

Default: `tab`

Type of tabbing interface. It can be either `tab` or `accordion`.

###### initial

See [placement](#placement).

###### multiSelect

Type: `Boolean`  

Default: `false`

If it’s accordion interface, determines if multi tab selection is allowed.

###### tab

Type: `String`  

Default: `> ul > li > a, > ul > li > button`

Selector used to collect all tab toggler elements.

###### pane

Type: `String`  

Default: `> div > div`

Selector used to collect all tab pane elements.

###### changeURL

Type: `Boolean`  

Default: `false`

If tab toggler elements are anchor elements, determines if URL should be update with `href` value.

###### select

Type: `Function`  

Arguments: [Tab], [Pane]

Event: `tabifyselect`

Callback to run on tab selection.

###### deselect

Type: `Function`  

Arguments: [Tab], [Pane]

Event: `tabifydeselect`

Callback to run on tab deselection.

###### create

Type: `Function`  

Arguments: [Tab], [Pane]

Event: `tabifycreate`

Callback to run on tab instance creation.

##### Options defined as `String`

Type: `String`

###### destroy

Destroy plugin instance.

###### next

Move to next tab element.

###### prev

Move to previous tab element.

###### move

Move to tab element determined by second argument. Second argument accepts values like [options → initial](#initial).

#### placement

Type: `Integer|String|Function|Boolean`  

Default: `1`

Initial element to select.

If defined as:

| Type | Description |

| --- | --- |

| `Integer` | Index of tab element to activate. |

| `String` | Value of `id` attribute, `data-tab-id` attribute or `href` attribute value of tab element to activate. |

| `Function` | Should return either index or string which correspond to integer and string values for this property. |

| `Boolean` | If true, it will active first tab element, else it won’t activate anything. |

## Examples

Default structure for tab interface.

```html



	


		
Tab 1

		
Tab 2

		
Tab 3

	

	


		


			
Pane 1

		

		


			
Pane 2

		

		


			
Pane 3

		

	



```


Setup tab instance.

```js

$('.Tab').tabify({

	type: 'tab',

	initial: 1,

	tab: '.Tab-toggler',

	pane: '.Tab-pane',

	namespace: 'Foobar',

	select: function ( tab, pane ) {

		// I’m selected!

	},

	deselect: function ( tab, pane ) {

		// I’m deselected!

	},

	create: function ( tab, pane ) {

		// I’m created!

	}

});

```

Move to next/previous tab.

```js

$('.Tab').tabify('prev');

$('.Tab').tabify('next');

```

Move to arbitrary tab.

```js

$('.Tab').tabify('move', 1);

$('.Tab').tabify('move', 'foo');

```

Destroy plugin instance.

```js

$('.Tab').tabify('destroy');

```

## Browser support

Tested in IE8+ and all modern browsers.

## License

MIT © [Ivan Nikolić](http://ivannikolic.com)