Tabs

Tabs buttons and tabs content may be anywhere in the dom, you don't need to collect them in one dom element. It is an analog of button plugin with data-type="radio".
Content for tab 1
Content for tab 2
Content for tab 3
Content for tab 4

Content for tab 1
Content for tab 2
Content for tab 3
Content for tab 4
tabs = document.querySelectorAll("[data-toggle='tabs']")
for tab in tabs
	tab.tabs()

Properties

Name Default Description
toggle @el.getAttribute( 'data-toggle' ) or 'tabs' Set toggle type.
target @el.getAttribute( 'data-target' ) or null Selector to find the content of that tab button.
group @el.getAttribute( 'data-group' ) or null Name of the tabs group. Uses to deactivate other tabs in the group, when one tab was activated.
event @el.getAttribute( 'data-event' ) or "click" This event will be used to activate/deactivate button.
initial @el.getAttribute( 'data-initial' ) or 0 Number of the tab to activate after initialization.

Methods

Method Description
activate

Activate button.

deactivate

Deactivate button.

enable

Enable button, events will work.

disable

Disable button, events will not work.

Events

Inside each method to get tab use @ or this in js. Class instance always stores in data attribute of the tab element @data['kitTabs'] or this.data['kitTabs'] in js.
Method Description
beforeactive

Set a function to call it before activate tab. If it returns deferred.promise(), then tab will not activate till deferred.resolve(), and woun't activate at all if deferred.reject(). You can just get data with ajax instead of using deferred.

tabs = document.querySelectorAll('.tabs-selector')
for tab in tabs
	tab.tabs
		beforeactive: ->
			d = $.Deferred()

			tab = @data['kitTabs']
			tab.el.querySelector('a').innerHTML = 'Loading...'
			tab._addClass '_disabled_'

			setTimeout ->
				d.resolve()
			,2000
			d.promise()

		onactive: ->
			tab = @data['kitTabs']
			tab._removeClass '_disabled_'
			tab.el.querySelector('a').innerHTML = 'Active tab'

		ondeactive: ->
			tab = @data['kitTabs']
			tab.el.querySelector('a').innerHTML = 'Tab'

onactive

Set a function to call it after tab activation.

failactive

Set a function to call it if activation failed.

beforedeactive

Call this function before deactivate tab.

ondeactive

Call this function after deactivate tab.

faildeactive

Set a function to call it if deactivation failed.