Skip to content

Commit 399212c

Browse files
alexchizhovcomalexchizhovcom
committed
New files
Version 1.1.0 update
1 parent 92b474c commit 399212c

7 files changed

+906
-263
lines changed

‎assets/jquery.pwstabs-1.1.0 .min.js

+10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/jquery.pwstabs-1.1.0.js

+190
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
/**
2+
* PWS Tabs jQuery Plugin
3+
* Author: Alex Chizhov
4+
* Author Website: http://alexchizhov.com/pwstabs
5+
* GitHub: https://github.com/alexchizhovcom/pwstabs
6+
* Version: 1.1.0
7+
* Version from: 15.01.2015
8+
* Licensed under the MIT license
9+
*/
10+
;(function ($, window, document, undefined) {
11+
12+
13+
var pluginName = "pwstabs",
14+
defaults = {
15+
effect: 'scale', // You can change effects of your tabs container: scale, slideleft, slideright, slidetop, slidedown
16+
defaultTab: 1, // The tab we want to be opened by default
17+
containerWidth: '100%' // Set custom container width if not set then 100% is used
18+
};
19+
20+
21+
22+
23+
function Plugin(element, options) {
24+
this.element = $(element);
25+
this.$elem = $(this.element);
26+
this.settings = $.extend({}, defaults, options);
27+
this._defaults = defaults;
28+
this._name = pluginName;
29+
30+
this.init();
31+
}
32+
33+
34+
Plugin.prototype = {
35+
36+
// Constructing Tabs Plugin
37+
init: function(){
38+
39+
var pwsTabs = this.$elem.children('[data-pws-tab]');
40+
41+
// Adding class to our selector
42+
this.$elem.addClass('pws_tabs_list');
43+
44+
// Put tabs container into another block
45+
this.$elem.wrap('<div class="pws_tabs_container" style="width:' + this.settings.containerWidth + '"></div>');
46+
47+
48+
// Hiding selectors children (Tabs)
49+
50+
if (this.settings.effect == 'slideleft') {
51+
$(pwsTabs).addClass('pws_tabs_slide_left_hide');
52+
} else if (this.settings.effect == 'scale') {
53+
$(pwsTabs).addClass('pws_tabs_scale_hide');
54+
} else if (this.settings.effect == 'slideright') {
55+
$(pwsTabs).addClass('pws_tabs_slide_right_hide');
56+
} else if (this.settings.effect == 'slidetop') {
57+
$(pwsTabs).addClass('pws_tabs_slide_top_hide');
58+
} else if (this.settings.effect == 'slidedown') {
59+
$(pwsTabs).addClass('pws_tabs_slide_down_hide');
60+
} else { // In case something else is in the settings field that is not correct
61+
$(pwsTabs).addClass('pws_tabs_scale_hide');
62+
}
63+
64+
65+
// Add UL / LI and A control elements to Tabs Container
66+
this.$elem.parent().prepend('<ul></ul>');
67+
68+
69+
var pwsTabsDataCounter = '1';
70+
this.$elem.children('[data-pws-tab]').each(function(){
71+
72+
// Set Data attributes with tab id number 1+
73+
$(this).attr('data-pws-tab-id', pwsTabsDataCounter);
74+
75+
// Add LIs and A controls
76+
$(this).parent().parent().find('ul').append('<li><a href="#" data-tab-id="' + $(this).data('pws-tab') + '">' + $(this).data('pws-tab-name') + '</a></li>');
77+
78+
// Adding class to our selector children (Tabs)
79+
$(this).addClass('pws_tab_single');
80+
81+
pwsTabsDataCounter++;
82+
83+
});
84+
85+
86+
87+
// Now lets show default Tab
88+
if (this.settings.effect == 'slideleft') {
89+
this.$elem.find('[data-pws-tab-id="' + this.settings.defaultTab + '"]').addClass('pws_tabs_slide_left_show');
90+
} else if (this.settings.effect == 'scale') {
91+
this.$elem.find('[data-pws-tab-id="' + this.settings.defaultTab + '"]').addClass('pws_tabs_scale_show');
92+
} else if (this.settings.effect == 'slideright') {
93+
this.$elem.find('[data-pws-tab-id="' + this.settings.defaultTab + '"]').addClass('pws_tabs_slide_right_show');
94+
} else if (this.settings.effect == 'slidetop') {
95+
this.$elem.find('[data-pws-tab-id="' + this.settings.defaultTab + '"]').addClass('pws_tabs_slide_top_show');
96+
} else if (this.settings.effect == 'slidedown') {
97+
this.$elem.find('[data-pws-tab-id="' + this.settings.defaultTab + '"]').addClass('pws_tabs_slide_down_show');
98+
} else { // In case something else is in the settings field that is not correct
99+
this.$elem.find('[data-pws-tab-id="' + this.settings.defaultTab + '"]').addClass('pws_tabs_scale_show');
100+
}
101+
102+
// Set container height to default tabs height
103+
this.$elem.height(parseInt(this.$elem.find('[data-pws-tab-id="' + this.settings.defaultTab + '"]').height()));
104+
// Now lets add active class to default tabs controller
105+
this.$elem.parent().find('ul li a[data-tab-id="' + this.$elem.find('[data-pws-tab-id="' + this.settings.defaultTab + '"]').data('pws-tab') + '"]').addClass('pws_tab_active');
106+
107+
108+
109+
110+
111+
112+
113+
// First lets find A link and add click function
114+
this.$elem.parent().find('ul li a').on('click', {pwsOptions : this.settings}, function (e) {
115+
116+
e.preventDefault(); // Prevent use of href attribute
117+
118+
var $settings = e.data.pwsOptions;
119+
var effect = $settings.effect;
120+
121+
122+
123+
124+
$(this).parent().parent().find('a').removeClass('pws_tab_active'); // Remove active class from all A links
125+
$(this).addClass('pws_tab_active'); // Add active class to current A link
126+
127+
// Now lets get current href attribute value
128+
var tabDataIdValue = $(this).data('tab-id');
129+
var currentTab = $(this).parent().parent().parent().find('div[data-pws-tab="' + tabDataIdValue + '"]');
130+
var allTabs = $(this).parent().parent().parent().find('[data-pws-tab]');
131+
132+
var getTabsContainer = $(this).parent().parent().parent().find('.pws_tabs_list');
133+
134+
135+
136+
// Now lets make it cooler, and add some effects to tabs container
137+
if (effect == 'slideleft') {
138+
allTabs.removeClass('pws_tabs_slide_left_show').addClass('pws_tabs_slide_left_hide');
139+
currentTab.addClass('pws_tabs_slide_left_show');
140+
} else if (effect == 'scale') {
141+
allTabs.removeClass('pws_tabs_scale_show').addClass('pws_tabs_scale_hide');
142+
currentTab.addClass('pws_tabs_scale_show');
143+
} else if (effect == 'slideright') {
144+
allTabs.removeClass('pws_tabs_slide_right_show').addClass('pws_tabs_slide_right_hide');
145+
currentTab.addClass('pws_tabs_slide_right_show');
146+
} else if (effect == 'slidetop') {
147+
allTabs.removeClass('pws_tabs_slide_top_show').addClass('pws_tabs_slide_top_hide');
148+
currentTab.addClass('pws_tabs_slide_top_show');
149+
} else if (effect == 'slidedown') {
150+
allTabs.removeClass('pws_tabs_slide_down_show').addClass('pws_tabs_slide_down_hide');
151+
currentTab.addClass('pws_tabs_slide_down_show');
152+
} else { // In case something else is in the settings field that is not correct
153+
allTabs.removeClass('pws_tabs_scale_show').addClass('pws_tabs_scale_hide');
154+
currentTab.addClass('pws_tabs_scale_show');
155+
}
156+
157+
// Set main container height to the height of current tab
158+
currentTab.parent().height(parseInt(currentTab.height()));
159+
160+
161+
});
162+
163+
164+
165+
166+
167+
168+
169+
170+
171+
172+
173+
174+
175+
176+
177+
} // Init function END
178+
179+
};
180+
181+
182+
183+
$.fn[pluginName] = function ( options ) {
184+
return this.each(function () {
185+
new Plugin( this, options );
186+
});
187+
};
188+
189+
190+
})(jQuery, window, document);

0 commit comments

Comments
 (0)