Home › Forums › JavaScript › [Extraordinary Solved] JQuery Plugin Patterns that can be Applied for Multiple Elements › Re: [Extraordinary Solved] JQuery Plugin Patterns that can be Applied for Multiple Elements
June 9, 2012 at 10:14 am
#104142
Taufik NurrohmanParticipant
Works fine. Thanks a lot!!! I add this condition so if the ID is not found, I can use the class:
clue = '_' + this.id;
if(!this.id) {
clue = '_' + this.className;
}(function($) {
$.fn.simpleTab = function(settings) {
settings = jQuery.extend({
active: 1,
fx: null,
showSpeed: 600,
hideSpeed: 400,
showEasing: null,
hideEasing: null
}, settings);
return this.each(function() {
var $t = $(this),
$tabContent = $t.children('div[data-tab]'),
visible = settings.active - 1,
clue = '_' + this.id;
if (!this.id) {
clue = '_' + this.className;
}
$t.addClass('simpleTab').prepend('
');
$tabContent.addClass('tab-content').each(function(i) {
$(this).attr('id', 'tab' + clue + i).hide();
$t.find('.tabs' + clue).append('' + $(this).data('tab') + ' ');
}).eq(visible).show();
$t.find('.tabs' + clue + ' a').on("click", function() {
var target = $(this).attr('href');
$(this).parents('.tabs' + clue).find('.activeTab').removeClass('activeTab');
$(this).addClass('activeTab');
if (settings.fx == "slide") {
$tabContent.slideUp(settings.hideSpeed, settings.hideEasing);
$(target).slideDown(settings.showSpeed, settings.showEasing);
} else if (settings.fx == "fade") {
$tabContent.hide();
$(target).fadeIn(settings.showSpeed, settings.showEasing);
} else {
$tabContent.hide();
$(target).show();
}
return false;
}).eq(visible).addClass('activeTab');
});
};
})(jQuery);