Tuesday, August 20, 2013

Easy way to enable, disable & hide jQuery UI tabs

While searching on how to hide a jQuery UI tab, I found that a lot of other people were also looking for ways to easily enable, disable, show and hide tabs using the jQuery UI tabs control. Unfortunately, the built-in way to do it is cumbersome at best (although I know it helps keep the code small). So, I created this small plug-in to make it easier. To use it, just copy the text to a file (I name jquery-ui-tab-utils.js) and reference it in your code.

Scroll to the bottom if you just want to see it work.

/**
 * jQuery-ui-tab-utils.js - Utilities to help with the jquery UI tab control
 * Date: 08/20/2013
 * @author Kyle White - kyle@kmwTech.com
 * @version 0.1
 * Built for and tested with jQuery UI 1.9.2
 * License: Use at your own risk and feel free to use this however you want.
 *
 * USAGE: 
 * $('MyTabSelector').disableTab(0);        // Disables the first tab
 * $('MyTabSelector').disableTab(1, true);  // Disables & hides the second tab
 * $('MyTabSelector').enableTab(1);         // Enables & shows the second tab
 * 
 * For the hide option to work, you need to define the following css
 *   li.ui-state-default.ui-state-hidden[role=tab]:not(.ui-tabs-active) {
 *     display: none;
 *   }
 */
(function ($) {
    $.fn.disableTab = function (tabIndex, hide) {
 
        // Get the array of disabled tabs, if any
        var disabledTabs = this.tabs("option""disabled");
 
        if ($.isArray(disabledTabs)) {
            var pos = $.inArray(tabIndex, disabledTabs);
 
            if (pos < 0) {
                disabledTabs.push(tabIndex);
            }
        }
        else {
            disabledTabs = [tabIndex];
        }
 
        this.tabs("option""disabled", disabledTabs);
 
        if (hide === true) {
            $(this).find('li:eq(' + tabIndex + ')').addClass('ui-state-hidden');
        }
 
        // Enable chaining
        return this;
    };
 
    $.fn.enableTab = function (tabIndex) {
 
        // Remove the ui-state-hidden class if it exists
        $(this).find('li:eq(' + tabIndex + ')').removeClass('ui-state-hidden');
 
        // Use the built-in enable function
        this.tabs("enable", tabIndex);
 
        // Enable chaining
        return this;
    }; })(jQuery);
If you have suggestions on making it better (or making it work for use-cases I haven't tested), please let me know. Here's an embedded JSFiddle to demonstrate how it works: