Estilo para lista desplegable HTML (select) con jQuery
Selector Decorator es un plugin para jQuery permite permite añadir estilo visual a los campos de selección ó listas desplegables HTML.
Cómo usarlo
En la parte del HTML definimos nuestra lista:
<div>
<select id="MySelect">
<option value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
</select>
</div>
En JavaScript:
<script type="text/javascript">
jQuery('document').ready(function(){
jQuery("#MySelect").selectdecorator(
{
DIVClass : "selectholder"
}
);
});
</script>
En la hoja de estilos CSS:
.selectholder{
width:242px;
overflow:0px;
padding:4px;
height:22px;
display:block;
background:url(images/select.gif);
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:13px;
}
.selectholder select{
min-width:242px;
}
SI SOBRE IE7, NO ANDA NO SIRVE!!! cuando lo van a entender??? CROSSSSSSS – BROWSER, hermano! Cross-Browser tiene que ser.
No funciona en IE7
Pero ¿cuando van a entender ustedes que IE7 es una mierda com todos los IE, y que además tiene mas de 5 años y un hermano mayor IE8 que por fin empieza a respetar mas los estandares? IE8 ya lleva varios añitos con nosotros. Si no podemos dar estilos chulos a un select en IE no nos vamos a joder todos por culpa de la excepción de este jodido navegador. En el resto de navegadores (unos 100 diferentes) funciona perfecto y solo con css, así que quien tiene que arregalr algo es MIE, evidentemente nadie va a ir a tu casa a actualizar tu navegador, así que si tu no lo haces, es tu problema, no te quejes! Estamos en 2010 hermano, iPads, etc.. no perdamos mas el tiempo con programillas cutres desfasados. El telefono mobil que usas tb es de 1a generación? si es así supongo que no intentas realizar cosas que solo puedes hacer con uno de 3G, ya sea navegar por internet, leer mails, etc.. Ni un solo minuto mas de dedicación a IE! el problema lo tienen ellos, no nosotros. Nosotros trabajamos en base a estandares.
prueben hacer los css con las clases para distintas versiones
* y _
los mismos css
es decir
.algo{
font-family:mi tipo de letra;
*font-family:mi tipo de letra;
_font-family:mi tipo de letra;
}
esto les deberia ayudar a hacer el sitio compatible con las distintas versiones de internet explorer, pero la verdad, entre variaciones de los navegadores e interpretacion del css y codigo html, es medio engorroso laburar con los divs, porque cada navegador lo lee distinto.
Por otro lado, alguien sabe como empezar a cambiar de tablas a divs sin hacerlo taaaan traumatico?
voy a ver si esto que hay aca funciona (lo de los menus)
Saludos!
IE7 no murió pero está a punto, menos de un 10% del mercado lo usa. Los desarrolladores y estudios deberían tomar la iniciativa de enterrar a los browsers viejos.
En mi caso tomamos IE8 como el standard y cobramos extra por dar soporte para IE6, y otro plus para IE7… no se imaginan como los clientes solitos prefieren no dar soporte para navegadores viejos 🙂
Eso fue lo que hicimos para la barra de busquedas de la home page de http://www.decasasyautos.com.
http://www.decasasyautos.com es el sitio de clasificados gratis numero 1 en Argentina y España. Podes alquilar, comprar y vender tu casa, departamente, vehiculo, auto, moto, bici, mascota, etc.
ES MUY FACIL DECIR USA TAL BROWSER CUANDO LO QUE SE DEBE HACER ES SOPORTARLO EN TODOS LOS BROWSER, DILE A LOS USUARIOS A VER QUE NO USEN TAL BROWSER, SIMPLEMENTE SE IRAN DE TU PÁGINA, ESO ES LO QUE QUIERES?
Es un proyecto un poco avanzado vale la pena descargarlo y ver la aplicacion en funcionamiento, el sistema tiene dos listas la cual cuando se selecciona un PAIS en el otro select apareceran las ciudades de este pais, ademas de esto podemos ingresar paises, ciudades, borrar paises, borrar ciudades todo de forma ASINCRONICA con JQUERY, php, mysql y un poco de ajax. espero el proyecto sea de su total agrado pueden ver la aplicacion en funcionamiento aqui: http://www.getvay.com/SeleccionAvanzado/index.php y la pueden descargar de aqui:http://www.getvay.com/pg/file/macs1407/read/1792/selects
que onda oye no se si me podrias ayudar mira aqui puedo ver el codigo para el combo en si pero yo necesito darle estilo a la lista del combo sabrás como puedo darle estilo y ademas, darle habilitarlo para ponerle una imagen.
gracias
cross-browser jua debiese de ser cross-ie, si ahí está el problema
Esto no funccióna.
No se dan cuenta IE7, y todas sus versiones anteriores y posteriores son muy malas, jQuery es excelente el IE es malo, esa es la diferencia 😉
Una consulta, que jquery utilizan en este ejemplo??