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:
Tabla de contenidos
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
6 comentarios
que buen ejemplo
gracias por todo, aunk deberian poner de una vez el ejemplo para mirar de lo k estan hablando
sorry no habia visto k dejaban el link del ejemplo upps
anRoswell, el ejemplo lo tienes al final del Post .. por si no lo ves, aqui te lo dejo:
Ejemplo ComboBox personalizado con efectos
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.
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