15/10/2010 Development / java script

Cara, programacao eh uma parada foda mesmo, to aki em casa 2:30 da manha, viajando num componentezinho de dropdown em jquery. Mas pq? Pq eu fiquei encucado em saber como o viado do programador, rsrsrsr...manipula o dropdowm quando o cara clicava em outros elementos, objetos na pagina.

Queria saber se ele colocava handlers, fazia alguma assinatura e ficava chegando de tempo em tempo, ateh que eu descobri o pulo do gato, e que pulo, um verdadeiro salto, rsrsrsrs

Na verdade, ele mantem o dropdowm, mas ele esconde o select, deixando apenas as options, e o evento o browser mesmo manipula.

Vamos ao exemplo, fiz sem CSS mesmo, basta clicar em cima do numero pra ver o resultado

// JAVASCRIPT

$().ready(function() {

$("#meuSelect").cboHuggler();

});

$.fn.cboHuggler = function(options) {

function combo(elem) {

var $el = $(elem);

alert($el.attr("id"));

var divTag = $('<div />'),

spanTag = $('<span />');

var selected = elem.find(":selected:first");

if (selected.length == 0) {

selected = elem.find("option:first");

}

spanTag.html(selected.html());

elem.css('opacity', 0);

elem.wrap(divTag);

elem.before(spanTag);

divTag = elem.parent("div");

spanTag = elem.siblings("span");

// handlers

elem.bind({

"change.uniform": function() {

spanTag.text(elem.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() {

spanTag.text(elem.find(":selected").html());

}

});

}

return this.each(function() {

var elem = $(this);

combo(elem);

})

}

// HTML

<select id="meuSelect">

<option>1</option>

<option>2</option>

<option>3</option>

</select>

Bom, espero que sirva de exemplo!