Selectbox

Selectbox es un plugin de jQuery UI que te permite personalizar con más facilidad los elementos de selección única o dropdown (selects de HTML).

La principal funcionalidad del plugin es la conversión de los selects y options por ul y li para poderlo personalizar más cómodamente su aspecto.

Su implementación es muy sencilla. Tan solo tienes que añadir en la cabecera de tu página los estilos necesarios, la librería jQuery, el plugin y su llamada:

<link href="css/jquery.selectbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.selectbox-0.2.js"></script>
<script type="text/javascript">
$(function () {
    $("#country_id").selectbox();
});
</script>

Todos estos archivos los puedes descargar de la página oficial del plugin, además de observar todas sus posibilidades.

El plugin parece bastante interesante también porque permite añadir combos dependientes utilizando la técnica AJAX.

En el <body> de tu página podrás añadir tus selects como sueles hacerlo pero añadiéndole un identificador único para invocarlo en la llamada al plugin.

<select name="country_id" id="country_id">
    <option value="1">España</option>
    <option value="4">Brazil</option>
    <option value="10">South Africa</option>
    ...
</select>

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(3 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ver más sobre