Sexy Selects, mejorando los select lists con jQuery

Escrito por y leído 6,840 veces. Ver comentarios

Sexy Selects, mejorando los select lists con jQuery

06ENERO/2011

En mi continuo afán por mejorar el aspecto de los elementos de los formularios que nos brindan los navegadores (que aunque mejoraron mucho de versiones antiguas), siguen siendo horribles, me traigo de jquery.com un plugin llamado Sexy Selects que hace eso, volver nuestros Selects o Listas, más sexys, ohhh yeah.

La forma de usarlo es muy fácil, sólo hace falta la librería jQuery y una línea de código más un poquito de CSS para que todo quede más bonito (como en la foto que se ve arriba de este texto). Mírate los códigos para saber como aplicarlo y recuerda que requiere el UI de jQuery por su apariencia.

Código 1 - HTML
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
<script src="/js/ui.sexyselect.0.5.js" type="text/javascript"></script>
<script src="/js/jquery.disable.text.select.js" type="text/javascript"></script>
<link href="/css/ui.sexyselect.0.5.css" rel="stylesheet" type="text/css" />
<link href="/css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
<!-- NOTA: estos archivos los encontrarás en la descarga desde la web de su autor -->
Código 2 - JAVASCRIPT
$(function () {
    $('#pretty_select').sexyselect();
});
Código 3 - HTML
<select size="4" id="pretty_select">
        <option value="Value 1">Value 1</option>
        <option value="Value 2">Value 2</option>
        <option value="Value 3">Value 3</option>
        <option value="Value 4">Value 4</option>
        <option value="Value 5">Value 5</option>
</select>

Acerca del Autor:

Diseñador web freelance en Coruña Galicia | Martin Iglesias

Martín Iglesias, diseñador web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 15 años de experiencia en el desarrollo de páginas web profesionales.

Si te ha gustado este artículo, por favor, ayúdame a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Artículos relacionados:

Este artículo ha salido en un total de 138 búsquedas desde Google en sus 867 días de vida y ha sido visto 6,840 veces.