Devam Ediyor

Lista Multiselect utilizando html, javascript, css

Descripción general:

Se debe crear una lista de multi selección de dos niveles, utilizando javascript, css, html y es opcional utilizar alguna librería como jquery.

A continuación, se muestran todas las características y están acompañadas de imágenes.

Características de la lista:

Ver [login to view URL]

1. Es una lista que aparece cuando se da clic en un botón.

2. La lista está contenida dentro de un div con la forma que se muestra en la imagen, hay que respetar la forma, la sobra y los colores.

3. La lista se ubica automáticamente de acuerdo a la posición del botón, para que coincidan los márgenes derechos del botón y del Div que contiene la lista, tal como se ve en la imagen.

4. La lista desaparece si se de clic fuera de la lista o se da clic sobre la X que aparece en la esquina superior derecha.

5. La lista es multi nivel, eso significa que hay opciones de primer nivel y de segundo nivel.

6. Si el primer nivel tiene sub-opciones aparecerá un Icono con un signo +

7. Si no tiene sub-opciones no tendrá ningún icono.

8. Por default las opciones de primer nivel no mostrarán las subopciones sino hasta que se dé clic en el icono +

Ver [login to view URL]

1. Cuando el puntero del mouse pase sobre una opción el color del fondo cambiará a celeste claro, cuando el mouse deje de estar sobre esa opción el color del fondo volverá a ser blanco.

Ver [login to view URL]

1. Cuando se dé clic sobre el Icono + se abrirá la opción que contiene sub-opciones

2. Y el Icono con el símbolo + se cambiará por un icono con el símbolo –

3. Si se da clic sobre el Icono con símbolo – se contraerá la opción.

4. Las letras de las opciones del 1er nivel están en color negro, las de segundo nivel en color gris.

Ver [login to view URL]

1. La lista es multi-select, puede elegirse varias opciones a la vez.

2. Se pueden elegir tanto opciones del nivel 1 como opciones del nivel 2.

3. Cuando se clic sobre una opción la lista No desaparece para que el usuario pueda elegir más opciones y en la opción seleccionada aparece un icono de check del lado izquierdo de la opción seleccionada.

4. Cada vez que se da clic sobre una opción se va a ver reflejada en el botón.

5. Si se selecciona varias opciones, estas se mostrarán en el botón, separadas por una coma.

6. Puede ser que si se seleccionan muchas opciones no se puedan ver todas en el botón, pero igual debe actualizarse el botón.

Ver Imagen 5

7. Si tiene más de 11 opciones se activa un scroll

8. Si se selecciona la opción [Seleccionar todas] la lista desaparece y el botón se actualiza con la palabra Todas

9. Si se han seleccionado varias opciones y se vuelve a dar clic sobre el botón la lista mostrará cuales opciones habían sido seleccionadas previamente.

Ver [login to view URL]

1. La lista tiene la posibilidad de realizar búsquedas.

2. Si se escribe una parte del nombre de una opción, desaparecerán todas las opciones que no coincidan con el criterio de búsqueda y en caso de ser necesario el tamaño del div se actualizará y el scroll desaparecerá.

3. Si habiendo realizado una búsqueda se da clic sobre la opción [Seleccionar Todas] se seleccionará todas las opciones que sean visibles en la lista y la lista desapareceré.

Beceriler: CSS, HTML, HTML5, Javascript, jQuery / Prototype

Daha fazlasını gör: combobox html icon css javascript, internet applications php css html javascript, textarea underline css html javascript, multiselect dropdown with checkbox in html5, bootstrap multiselect listbox, multiple select box in html, how to select multiple options from a drop down list in html, jquery multiselect get selected values, html multi select checkbox, bootstrap multiselect, bootstrap multiple select input, good html javascript css igoogle gadgets, html javascript css php tutorial, forms data entry html javascript css, graphics design php html javascript css, menu delay html javascript css, html javascript css odometer, php mysql html javascript css, html javascript css ajax json, opencart php html javascript css

İşveren Hakkında:
( 2 değerlendirme ) San José, Costa Rica

Proje NO: #18647920

Bu iş için 3 freelancer ortalamada $107 teklif veriyor

IronencodersUSA

Estimado cliente, Por medio de la presente queremos expresarle nuestro interés en brindarle nuestros servicios de diseño y desarrollo de sistemas, plataformas, sistemas automatizados, aplicaciones móviles y página Daha Fazla

$188 USD in 2 gün içinde
(8 Değerlendirme)
4.1
JennyHazard

For you, I'll make Optimized & Responsible website within attractive and stylish design. CMS or Service : Wordpress, Shopify, Magento... Frontend framework and library, CSS : Ionic, Angular, ReactJS, VueJS, Bootstr Daha Fazla

$100 USD in 3 gün içinde
(1 Yorum)
1.5
xnechijli01

Buen día. Me interesa trabajar en tu proyecto. Tengo un sitio web en HTML limpio que uso para las pruebas que me piden los empleadores. Puedo hacer una prueba breve para que evalúes mi trabajo. De hecho, podría empezar Daha Fazla

$32 USD in 15 gün içinde
(1 Yorum)
1.1