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"); // handlerselem.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!