Selector de lista dual dinámica en JavaScript puro-selector de lista
| Autor: | fabiomrosa |
|---|---|
| Views Total: | 1,483 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 6, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Un componente de selector de estilo de cuadro de lista doble que le permite mover cualquier número de elementos entre dos listas HTML con el clic del ratón o toque toque.
Funcionamiento
Inserte el código JavaScript y la hoja de estilos del selector de lista en la página HTML.
<link rel="stylesheet" href="src/list-picker.css"> <script src="src/list-picker.js"></script>
La estructura HTML principal para el selector de lista.
<div class="list-picker"> <ul id="options" class="list-picker-list"> <li class="list-picker-list-item">Item</li> </ul> <ul id="picks" class="list-picker-list"></ul> </div>
Prepare los elementos de lista en una matriz de JavaScript como esta:
var list = ['ActionScript', 'CSS', 'C#', 'HTML', 'Java', 'JavaScript', 'Python', 'Ruby', 'Swift'];
Inicializar el selector de lista con la configuración predeterminada.
var listPicker = new ListPicker({
list: list
}); Todas las opciones de configuración.
var listPicker = new ListPicker({
list: list,
// Array list
gap: 1,
// Gap between items
order: 'asc', // Ordering in second list
reset: true
// Reseting when picked
}); Obtenga los elementos seleccionados.
listPickerInstance.getPicks()
