/** * @desc Tab plugin. Part of the Codereck Javascript Suite. * * @copyright Ryan Zec 2007-2009, All Right Reserved * * @license BSD (see LICENSE file included, the generic templete can be found at http://www.opensource.org/licenses/bsd-license.php) */ (function($) { //create the codereck scope $.cr = $.cr || {}; //initialization of codereck tabs $.fn.tabs = function(options) { var temp = new $.cr.tabs(this, options); return this; } //codereck tab class $.cr.tabs = function(element, options) { var self = this; self.element = element; self.options = $.extend( { //element id and class names(css must match) element_id: self.element.attr('id'), tabs_id: null, //css classes ul_class: 'cr_tabs', content_class: 'cr_tab_content', selected_tab_class: 'cr_tab_selected', unselected_tab_class: 'cr_tab', loading_animation: 'cr_tab_loading', loading_text: 'cr_tab_loading_text', //both of these must be set to use the separate functionality tabs_id: null, content_id: null }, options); var children_selector = null; if(!self.options.tabs_id) { self.options.tab_set_id = self.element.attr('id'); self.separate = false; self.options.children_selector = '#' + self.options.element_id + ' > div'; $(self.options.children_selector).css('display', 'none'); children_selector = 'div'; } else { self.options.tab_set_id = self.options.tabs_id; self.separate = true; self.options.children_selector = '#' + self.options.element_id + ' div#' + self.options.content_id + ' > div'; $(self.options.children_selector).css('display', 'none'); children_selector = '#' + self.options.content_id + ' div'; } // save instance for later $(element).data($.cr.tabs.instance_key, this); //get the ul element that contains the list of tabs var ul_element = $('#' + self.options.tab_set_id).children('ul').slice(0,1); var list_items = ul_element.children('li'); //add content box after ul list - current only used for ajax calls but future to use it for all content var content_add_element_id = null if(self.separate === true) { content_add_element_id = $('#' + self.options.content_id); } else { content_add_element_id = ul_element; } content_add_element_id.after('
'); $(self.options.children_selector).addClass(self.options.content_class); //all css classes to necessary elements ul_element.addClass(self.options.ul_class); list_items.addClass(self.options.unselected_tab_class); //click event - we do want to use livequery but for some reason trigger does not work with livequery. $('#' + self.options.tab_set_id).children('ul').children('li').children('a').each(function(count) { $(this).click(function() { var id = $(this).attr('href'); if(id.substr(0, 1) == '#') { id = id.split('#')[1]; } $('#' + self.options.element_id).children('.cr_tab_content:first').empty(); $('#' + self.options.element_id).children('div.' + self.options.content_class).css('display', 'none'); //add select class tag to this link and remove from all other $(this).parent('li').parent().children('li.' + self.options.selected_tab_class).removeClass(self.options.selected_tab_class); $(this).parent('li').addClass(self.options.selected_tab_class); if(!$(this).hasClass('cr_tab_ajax')) { //after load callback function*/ $(self.options.children_selector).css('display', 'none'); $(self.options.children_selector + '[id=' + id + ']').css('display', 'block'); } else { $(self.options.children_selector).css('display', 'none'); //start animation $('#' + self.options.element_id).children('.cr_tab_content:first').addClass(self.options.loading_animation); $('#' + self.options.element_id).children('.cr_tab_content:first').append('
Loading
'); $.ajax( { type: 'post', url: $(this).attr('href'), success: function(message) { //stop animation $('#' + self.options.element_id).children('.cr_tab_content:first').removeClass(self.options.loading_animation); $('#' + self.options.element_id).children('.cr_tab_content:first').html(message); }, error: function (XMLHttpRequest, textStatus, errorThrown) { //stop animation $('#' + self.options.element_id).children('.cr_tab_content:first').removeClass(self.options.loading_animation); $('#' + self.options.element_id).children('.cr_tab_content:first').html('Error loading page.'); } }); $('#' + self.options.element_id).children('.cr_tab_content:first').css('display', 'block'); } return false; }); }); //trigger first tab self.trigger_tab(1); } //static information $.cr.tabs.instance_key = 'codereck_tab_instance'; $.cr.tabs.get_instance = function(el) { return $(el).data($.cr.tabs.instance_key); }; //add chainable method to element selector with tabs $.each(['trigger_tab'], function(i, method) { $.fn[method] = function() { var args = arguments; return this.each(function() { var instance = $.cr.tabs.get_instance(this); instance[method].apply(instance, args); }); } }); $.extend($.cr.tabs.prototype, $.cr.core); $.extend($.cr.tabs.prototype, { //trigger a click even on a certain tab trigger_tab: function(tab) { if(typeof(tab) === 'number') { $('#' + this.options.tab_set_id + ' a').slice(tab - 1, tab).trigger('click'); } else if(typeof(tab) === 'string') { $('#' + this.options.tab_set_id + ' a[@href=' + tab + ']').trigger('click'); } }, add: function(position, title, content, rel) { //add the list element is the correct position }, remove: function(tab) { //switch to the first tab(or second tab is first tab is being removed //remove the list element //remove the div with the tab content }, enable: function(tab) { //check to see if tab is disabled //add click event back to the tab and make text black again }, disable: function(tab) { //check to see if tab is enabled //remove click event from and make the text gray }, show: function(tab) { if(typeof(tab) === 'number') { $('#' + this.options.tab_set_id + ' li').slice(tab - 1, tab).show(); } else if(typeof(tab) === 'string') { $('#' + this.options.tab_set_id + ' a[@href=' + tab + ']').parent('li').show(); } }, hide: function(tab) { if(typeof(tab) === 'number') { $('#' + this.options.tab_set_id + ' li').slice(tab - 1, tab).hide(); } else if(typeof(tab) === 'string') { $('#' + this.options.tab_set_id + ' a[@href=' + tab + ']').parent('li').hide(); } } }); })(jQuery);