Felipe Huggler * FrontEnd, Banco de dados, Desesenvolvimento, Produtos, Medias

08/02/2011 Development / java script

comboBox style jquery

Criei esse plugin que eh rapidnho e dah uma enganada legal na aplicacao. Quem quiser eh soh mandar bala. Naum coloquei todos os eventos, mas podem ser passados por parametros e isso fica a criterio de quem quiser implementar. ;-)

$.fn.comboBox = function(options) {

function combo(cbo) {

var $dv = jQuery('

').addClass("cboBox");
var $sp = jQuery('');
var selected = cbo.find(":selected:first");

        if (selected.length == 0) {
            selected = cbo.find("option:first");
        }

$sp.html(selected.html());

cbo.css('opacity', 0).wrap($dv).before($sp); /*este eh o segredo*/

        /* handlers */
        /**********************/
        cbo.bind(
            { "change.uniform": function() {
                $sp.text(cbo.find(":selected").html());
            },
                "focus.uniform": function() { },
                "blur.uniform": function() { },
                "mousedown.uniform touchbegin.uniform": function() { },
                "mouseup.uniform touchend.uniform": function() { },
                "click.uniform touchend.uniform": function() { },
                "mouseenter.uniform": function() { },
                "mouseleave.uniform": function() { },
                "keyup.uniform": function() {
                    $sp.text(cbo.find(":selected").html());
                }
            });
    };

    return this.each(function() {
        combo(jQuery(this));
    });
}

div.cboBox { border: 1px solid gray; background: black; color: gray; background: url('seta.gif') no-repeat right; }
div.cboBox span { position:absolute; margin: 2px 0px 0px 3px }
div.cboBox span, select {font-family: Arial; font-size: 11px}

Demo