jSelectBox

the jquery select box plugin developed by gradinariu bogdan

by gion_13

HTML

<h1>jSelectBox.js - the select box jquery plugin</h1>
<p>
    
    So your designer wants a fancy selectbox and you're concerned about the cross-browser looks and functionality, huh?<br/>
    Then you'll need this jQuery plugin : <b>jSelectBox</b>.<br/>
    It's quite easy to use (like any other plugin) : 
    <code><pre>    $('select').jSelectBox(settings);
</pre></code>
    where <b>settings</b> is an object that contains key-value pairs of options that configure how the new select box looks &amp; works. Here are the default settings that you can overwrite : 
    
    <code><pre>     $.fn.jSelectBox.defaults = {
        classPrefix : 'jselectbox',        // the class prefix thatall of the components will have -> nice feature for quick access & applying different themes to different selectboxes
        eventNamespace : 'jselectbox',        // the namespace that the events will have : event.namepsace
        expandOptions : {            // options for the expand animation 
            easing : 'swing',
            duration : 300,
            callback : null
        },
        collapseOptions : {            // options for the collapse animation 
            easing : 'swing',
            duration : 300,
            callback : null
        },
        collapseOnBlur : true,            // if true, when the selectbox loses focus, it will collapse (if expanded)
        copyEvents    : false            // if true, the new selectBox will copy the old one's eventhandlers
    }
</pre></code>
    The beauty lies in the fact that it's extensible &amp; customizable (in fact, just modify the css and you have a new select box)
</p>
<br/><br/><br/><br/><br/>
Still not convinced? Then here's a couple of demos (gues you can "ctrl+u" this page to see how they're built) : 
<div class="section">
    <label>default functionality : </label><br/>
    
    <select>
        <option value="#1">first</option>
        <option value="#2">second</option>
        <option...

CSS

/*basic html stuff*/
body{
    font-size : 15px;
}
.section {
    margin: 50px auto;
    width : 100%;
}
select, 
.jselectbox,
label {
    float : left;
    margin-right : 20px;
}
label{
    cursor : pointer;
}
.clear{
    clear : both;
}
div.value{
    font-size : 20px;
}
.value{
    font-weight : bold;
}
pre{
    background-color : #eee;
    overflow-x : auto;
}

/*default theme*/
.jselectbox-wrapper{
    cursor: pointer;
    width: 200px;
    border : 1px solid #000;
    position : relative;
    font-size : 25px;
    height : 30px;
}
.jselectbox-wrapper .jselectbox-trigger{
    float : right;
    background-image : url('http://ittworld.com/wp-content/themes/arras-theme/images/downArrowImg.gif');
    background-repeat : no-repeat;
    background-size : 100% 100%;
    width : 30px;
    height : 30px;
} 
.jselectbox-wrapper .jselectbox-value, 
.jselectbox-wrapper .jselectbox-option-list li{
    padding: 2px 1px 0 4px;
} 
.jselectbox-wrapper .jselectbox-value{
    height: 30px;
    overflow: hidden;
}
.jselectbox-wrapper .jselectbox-option-list{
    display : none;
    list-style : none;
    position : absolute;
    border : 1px solid #000;
    width : 100%;
    background-color:#fff;
    z-index : 2;
    margin : 0;
    padding : 0;
    margin : -3px 0 0 -1px;
}
.jselectbox-wrapper .jselectbox-option-list li{
    margin : 0;
}
.jselectbox-wrapper .jselectbox-option-list li .jselectbox-option-value{
    display : none;
}
.jselectbox-wrapper .jselectbox-option-list li:hover{
    background-color :#ccc;
}

/*theme 1*/
.theme1-wrapper{
    cursor: pointer;
    width: 200px;
    border : 1px solid #000;
    position : relative;
    font-size : 25px;
    height : 30px;
}
.theme1-wrapper .theme1-trigger{
    float : left;
    background-image : url('http://ittworld.com/wp-content/themes/arras-theme/images/downArrowImg.gif');
    background-repeat : no-repeat;
    background-size : 100% 100%;
    width : 30px;
    height : 30px;
} 
.theme1-wrapper .theme1-value,...

JavaScript

$(document).ready(function() {
    // some easings used in the second select box expand-collapse animation
    $.extend($.easing, {
        easeInExpo: function(x, t, b, c, d) {
            return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
        },
        easeOutExpo: function(x, t, b, c, d) {
            return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
        },
        easeInOutExpo: function(x, t, b, c, d) {
            if (t == 0) return b;
            if (t == d) return b + c;
            if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
            return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
        }
    });



    // bind some events handlers to the new select boxes
    // since we have 2 events triggered in the same time for the same event : "eventName" and "eventName.namespace"
    // it is better to add the namespaced event handlers first and stop the event propagation, in order
    // to prevent the event being handled twice
    $('div.jselectbox').live('init.bla', function(e) {
        if (e.namespace != 'bla') return;
        console.log("No,wait!I'm a better selectBox. And I'm initialised >:) mwahahaha!");

        // since now the selectBox is in the dom, we don't have to bind all the events using delegates ;) (a.k.a. "live" method)
        // we can binde them just with "bind" or the shortcuts for eventhandelrs : "click", "focus", etc
        // let's overwrite the delegated event handler fot the change event!
        $(this).die('change').bind('change', function(e) {
            console.log("I'm different from the others \w/");
            return false;
        });
        return false;
    }).live('init.hover', function(e) {
        if (e.namespace != 'hover') return;
        $(this).hover(

        function(e) {
            $(this).data('jSelectBoxApi').expandList();
        }, function(e) {
            $(this).data('jSelectBoxApi').collapseList();
        });
        return false;
   ...