https://github.com/emmanuelbeziat/izzi-tabs

A simple tabs plugin. Use it for navigation or as a simple showoff section.
https://github.com/emmanuelbeziat/izzi-tabs

javascript tabs

Last synced: about 2 months ago
JSON representation

A simple tabs plugin. Use it for navigation or as a simple showoff section.

• Host: GitHub
• URL: https://github.com/emmanuelbeziat/izzi-tabs
• Owner: EmmanuelBeziat
• License: mit
• Created: 2014-04-30T03:36:04.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2017-06-30T11:32:50.000Z (over 7 years ago)
• Last Synced: 2024-04-14T15:38:03.621Z (9 months ago)
• Topics: javascript, tabs
• Language: JavaScript
• Homepage:
• Size: 171 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![version](https://img.shields.io/badge/version-1.0.0-orange.svg?style=flat-square)

# IzziTabs

A lightweight and simple plugin to have sticky stuff.

---

#Install

Using `npm` command, it’s as simple as this :

```bash

npm i -D izzi-tabs

```

If you use bower, you can just do

```bash

$ bower i izzi-tabs

```

Or you could just download the files on GitHub.

# How to use

```javascript

var izziTabs = new IzziTabs('.izzi-tabs');

```

You can pass either a html object, or a selector in a string.

Then, you should have a markup similar to this:

```html

	tab1

	tab2

	tab3

	tab4



	


		

	


	


		

	


	


		

	


	


		

	



```


The plugin work with a simple anchor system.

Check the demo files for an example.

# Options

You can also pass options to the plugin to change it’s default settings, like this:

```javascript

var izziTabs = new IzziTabs('.izzi-tabs', {

	tabLinkSelector: 'tab-link',

	tabLinkActiveClass: 'tab-link--active',

	afterShowTab: function () {

		console.log('after show');

	}

});

```

	

		

			Option

			Default value

			Type

			Description

		

	

	

		

			tabLinkSelector

			'.tab-links__item'

			string

			Define a CSS selector to find your link items

		

		

			tabLinkActiveClass

			'is-sticky'

			string

			The class name to be applied to the link item you activate

		

		

			tabItemSelector

			'.tab-content__item'

			string

			Define a CSS selector to find your open tab panel

		

		

			tabItemActiveClass

			'is-active'

			string

			The class name to be applied to the panel you activate

		

		

			beforeShowTab

			null

			function

			A callback function to be called before the panel is showed

		

		

			afterShowTab

			null

			function

			A callback function to be called after the panel is showed

		

	

# TODO

* Add possibility to easily animate the tab panel