-
Notifications
You must be signed in to change notification settings - Fork 244
/
ik_tabs.js
123 lines (91 loc) · 2.89 KB
/
ik_tabs.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
;(function ( $, window, document, undefined ) {
var pluginName = 'ik_tabs',
defaults = {
tabLocation: 'top',
selectedIndex: 0
};
/**
* @constructs Plugin
* @param {Object} element - Current DOM element from selected collection.
* @param {Object} [options] - Configuration options.
* @param {number} [options.tabLocation='top'] - Tab location (currently supports only top).
* @param {number} [options.selectedIndex] - Initially selected tab.
*/
function Plugin( element, options ) {
this._name = pluginName;
this._defaults = defaults;
this.element = $(element);
this.options = $.extend( {}, defaults, options) ;
this.init();
}
/** Initializes plugin. */
Plugin.prototype.init = function () {
var id, $elem, $tabbar, pad;
plugin = this;
id = 'tabs' + $('.ik_tabs').length; // create unique id
$elem = this.element.addClass('ik_tabs');
$tabbar = $('<ul/>') // create ul element to hold all tabs
.addClass('ik_tabbar cf')
.prependTo($elem);
plugin.panels = $elem // initialize panels and create tabs
.children('div')
.each( function(i, el) {
var $tab, $panel, lbl;
$panel = $(el).attr({
'id': id + '_panel' + i // add unique id for a panel
})
.addClass('ik_tabpanel')
.hide();
lbl = $panel.attr('title'); // get tab label from panel title
$panel.removeAttr('title');
$tab = $('<li/>').attr({
'id': id + '_tab' + i // create unique id for a tab
})
.text(lbl > '' ? lbl : 'Tab ' + (i + 1))
.on('click', {'plugin': plugin, 'index': i}, plugin.selectTab) // add mouse event handler
.appendTo($tabbar);
});
plugin.tabs = $tabbar.find('li');
plugin.selectTab({ // select a pre-defined tab / panel
data:{
'plugin': plugin,
'index': plugin.options.selectedIndex
}
});
};
/**
* Selects specified tab.
*
* @param {Object} [event] - Keyboard event (optional).
* @param {object} event.data - Event data.
* @param {object} event.data.plugin - Reference to plugin.
* @param {object} event.data.index - Index of a tab to be selected.
*/
Plugin.prototype.selectTab = function (event) {
var plugin = event.data.plugin,
ind = event.data.index,
$tabs,
$panels;
$elem = plugin.element;
$tabs = plugin.tabs;
$panels = plugin.panels;
$tabs // deselect all tabs
.removeClass('selected')
.blur();
$($tabs[ind]) // select specified tab
.addClass('selected');
if (event.type) $($tabs[ind]).focus(); // move focus to current tab if reached by mouse or keyboard
$panels // hide all panels
.hide();
$($panels[ind]) // show current panel
.show();
}
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if ( !$.data(this, pluginName )) {
$.data( this, pluginName,
new Plugin( this, options ));
}
});
}
})( jQuery, window, document );