Hoy vamos a realizar un combo box pero con cierto dinamismo utilizando Jquery y un plugin llamado SelectList con el que la experiencia del usuario será más amigable.

Entre las características de este plugin se puede destacar:

  • Se añade a un elemento "select" existente, así no tendras que cambiar tu código HTML.
  • Opción de clasificar automáticamente los elementos seleccionados.
  • Permite uso de funciones.
  • Tiene funciones para añadir y eleminar Items.
  • Soporta animaciones y efectos personalizados.
  • Cambia el aspecto con CSS.
  • Ocupa menos de 3Kb.
  • Funciona en los principales exploradores, entre ellos: irefox 2 +, Opera 9.5 +, Google Chrome, Safari 3 +, e Internet Explorer 6 +.

Ahora que sabeis de que trata el plugin, vamos manos a la obra:

Descarga e Instalación

Descargamos el plugin, lo descomprimimos y copia los archivos CSS y Javascript en tu website o aplicació.

Modo de Empleo

En la cabecera de la página, es decir, entre las etiquetas HEAD, haremos referencia a los archivos CSS y JS (Javascript) de la siguiente manera:

PLAIN TEXT
HTML:
  1. <link href="css/selectlist.css" rel="stylesheet" type="text/css" />  <script src="scripts/jquery.min.js" type="text/javascript"></script>
  2. <script src="scripts/jquery.selectlist.pack.js" type="text/javascript"></script>

A su vez también escribiremos el siguiente código para hacer referencia a la función que desencadenará cuando seleccionamos un idioma de la lista:

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript"> $(document).ready( function () { $(\\'select#lenguajes\\').selectList( {sort: true } ); } ); </script>

Para este ejemplo haremos un select con un combo donde el ID es "lenguajes":

PLAIN TEXT
HTML:
  1. <select id="lenguajes" multiple="multiple" name="lenguajes[]"> <option value="Inglés">Inglés</option> <option value="Español">Español</option> <option value="Frances">Francés</option> <option value="Italiano">Italiano</option> <option value="Aleman">Alemán</option> </select>

Podeis poner tantos lenguajes como os venga en gana. Si probais el ejemplo vereis como a parte de que te salen debajo de la lista aquellos lenguajes que hayas elegido, también se ordenan automáticamente.

Ejemplo de Select_List
Vía: Webintenta

Posts Relacionados