Pedir presupuesto

SelectList – Combo box personalizado con efectos en JQuery

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:

[html]  
[/html]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:[js]

[/js]

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

[html]

[/html]

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

¿Te ha gustado?, Comparte!!

6 comentarios

  1. He enviado un correo privado al administrador de este sitio y me pidió que lo hiciera a través de este medio. Me interesó mucho este posteo sobre las pestañas en jQuery que traen datos de una db, como soy novata en programación, pero desmenuzo cada script que cae en mis manos, precisaría que me guien para parsear en Ajax una estructura como la siguiente:

    nombre
    equiv
    imagen

    dato1dato2
    dato3dato4

    pro / contra

    como véis son tablas anidadas y en el último td, quisiera poner las pestañas, una para los pro y el otro para los coantra.
    Agradezco cualquier ayuda.

  2. mónica no entiendo muy bien lo que quieres hacer, además no se si tiene que ver con este POST, ¿estás segura que lo que quieres es algo como el ejemplo de este artículo?

    saludos

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.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es