Zelect

Los selects o dropdowns siempre han sido unos elementos HTML difíciles de personalizar.

En este artículo vamos a ver una forma simple de hacerlo utilizando el plugin jQuery Zelect.

La principal operación del plugin es convertir las opciones del select en una lista ordenada para poder personalizarlo con más facilidad y con las misma funcionalidad: seleccionar un elemento del listado. Es interesante también porque incorpora un buscador que tras escribir en el campo de texto te busca en linea los registros coincidentes.

Es un plugin muy liviano y fácil de añadir a tus páginas Web. Tan solo deberás añadirlo en la cabecera de tu página:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="./zelect.js"></script>
<script type="text/javascript">
$(setup)

function setup() {
    $('#id_country').zelect({ placeholder:'Selecciona país...' })
}
</script>

Y en el <body>, dentro de un formulario añadir tu select html, como por ejemplo:

<select name="id_country" id="id_country">
    <option value="231">Afganistán</option>
    <option value="230">Albania</option>
    <option value="1">Alemania</option>
    ...
</select>

Ahora podríamos darle un poco de estilo añadiendo lo siguiente a tu hoja de estilos:

.zelect {
    display: inline-block;
    background-color: white;
    min-width: 300px;
    cursor: pointer;
    line-height: 36px;
    border: 1px solid #dbdece;
    border-radius: 6px;
    position: relative;
}
.zelected {
    font-weight: bold;
    padding-left: 10px;
}
.zelected.placeholder {
    color: #999f82;
}
.zelected:hover {
    border-color: #c0c4ab;
    box-shadow: inset 0px 5px 8px -6px #dbdece;
}
.zelect.open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.dropdown {
    background-color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #dbdece;
      border-top: none;
    position: absolute;
    left:-1px;
    right:-1px;
    top: 36px;
    z-index: 2;
    padding: 3px 5px 3px 3px;
}
.dropdown input {
    font-family: sans-serif;
    outline: none;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #dbdece;
    box-sizing: border-box;
    width: 96%;
    padding: 7px 0 7px 10px;
}
.dropdown ol {
    padding: 0;
    margin: 3px 0 0 0;
    list-style-type: none;
    max-height: 150px;
    overflow-y: scroll;
}
.dropdown li {
    padding-left: 10px;
}
.dropdown li.current {
    background-color: #e9ebe1;
}
.dropdown .no-results {
    margin-left: 10px;
}

Obteniendo como resultado:

zelect

Ver ejemplo en funcionamiento

Descargar

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!
(4 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

4 respuestas a “Zelect”

  1. Pedro dice:

    Hola buen dia!!
    me podrian dar un ejemplo pero usando ajax porfavor?
    e tratado de hacerlo por mi cuenta pero no lo e podido hacer 🙁 .
    desde ya Gracias!!

  2. ANTONIO dice:

    Hola Jose, estoy buscando alguna rutina que me permita, por un lado cargar en un select, de forma asíncrona una gran cantidad de items desde una BD (más de 30.000) y por otro lado utilizar algo parecido a ZELECT para gestionar la selección del select una vez cargado.
    ¿Puedes darme alguna idea?
    Gracias,
    Antonio

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre