jQuery Plugins by Fredi Bach: InputNotes, AutoAnchors, RandomClass, RemoveOverflow, aPartHide, TabSelect, DefaultsTagger, SelectSwitcher, LivingFade, SlideInReplace, WaveAnimate

TabSelect jQuery Plugin

A plugin to select one or more array or form entries visually, for example to filter a list or replace a multiselect form element.

Demo Usage Styling Download Compatibility Changelog

Demo

In this first demo you can see the basic usage of the plugin. You have an array of possible values and you define the initial selection. If you click on one of the options, the state toggles:

In the next demo we use a different array with car manufacturers. You can use the plugin as often as you want and everytime with different settings. In this case we initialize the plugin without anything selected:

You can of course start with everything selected, it's up to you:

In all above examples, we've defined the selection in the initialization of the plugin. Another way to do it is by using a text input as the source for the selection:

If you toggle an option, the text changes automatically, in other words, you can use that text field in a form to submit the selection. In such a case you would of course hide the text field first. Multi selects are fine as well, if you don't want comma separated returns:

Here's one where the textfield is hidden and this example has an additional onChange callback that outputs the selection in your firebug console:

Additionally the plugin supports slecting all or selecting no options as demonstrated in this demo:

  select all   select none

Usage

This is how we called the plugin for the first demo (the one with the languages):

var languages = ["de","fr","en","es","it"];

$('#langtabs').tabSelect({
  tabElements: languages,
  selectedTabs: [ 'de', 'en' ]
});

This is how we made the first car example, note the empty selection:

var cars = ["Audi","Fiat","Ford","Peugeot","Ferrari"];

$('#cartabs1').tabSelect({
  tabElements: cars,
  selectedTabs: [ ]
});

This is how you select all:

$('#cartabs2').tabSelect({
  tabElements: cars,
  selectedTabs: 'all'
});

Check the source of this page for the rest of the demos. They are pretty straight forward.

Styling

You're completely free to style your elements. Default setting for the tabs is a span element, but you can change that in the settings (check the plugin source, the default settings are right at the top). Here's the styling I used for the demos:

div.demo span span {
        font-weight: normal;
        letter-spacing: 1px;
        text-decoration: none;
        padding: 2px;
        padding-left: 4px;
        padding-right: 4px;
        padding-bottom: 1px;
        margin-right: 6px;
        
        cursor: hand;
        cursor: pointer;
        
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        -webkit-border-radius: .2em;
        -moz-border-radius: .2em;
        border-radius: .2em;
        -webkit-box-shadow: 0 1px 2px rgba(160,160,160,1);
        -moz-box-shadow: 0 1px 2px rgba(160,160,160,1);
        box-shadow: 0 1px 2px rgba(160,160,160,1);
}

div.demo span.active {
        background: #99cc33;
        color: #fff;
        border: 1px #66aa00 solid;
}
div.demo span.active:hover {
        background: #66aa00;
        color: #fff;
        border: 1px #338800 solid;
}

div.demo span.inactive {
        background: #ddd;
        color: #888;
        border: 1px #bbb solid;
}
div.demo span.inactive:hover {
        background: #bbb;
        color: #fff;
        border: 1px #888 solid;
}

Download

Current version: jquery.tabselect-0.2.js (3.9k not minified)

Compatibility

Tested in:

With:

There really is nothing complicated in there, so expect the plugin to work in older browsers as well.

Changelog