Número hermoso Spinner en JavaScript puro-cantidad de entrada
| Autor: | awdltd |
|---|---|
| Views Total: | 376 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 19, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
La biblioteca de entrada de cantidad le ayuda a crear un número hermoso de entrada Spinner para hacer girar cantidades con botones de aumento y disminución.
Funcionamiento
Instale la entrada de cantidad.
# NPM $ npm install @ohepworthbell\quantityinput --save
Importe la hoja de estilos principal en el documento.
<link href="./style.css" rel="stylesheet" type="text/css" />
Importe la entrada de cantidad como un módulo.
<script type="module"> import QuantityInput from './quantity.js'; </script>
Cree el código HTML para la entrada de cantidad.
<fieldset data-quantity> <legend>Change quantity</legend> </fieldset>
El código JavaScript para habilitar la entrada de cantidad.
(function(){
let quantities = document.querySelectorAll('[data-quantity]');
if (quantities instanceof Node) quantities = [quantities];
if (quantities instanceof NodeList) quantities = [].slice.call(quantities);
if (quantities instanceof Array) {
quantities.forEach(div => (div.quantity = new QuantityInput(div, 'Down', 'Up')));
}
})();
