Como ya ocurría con los plugins aui-customSelect y aui-customCheckRadio he creado un plugin enteramente en ALLOY para utilizarlo en Liferay. Es el único plugin que contraréis en ALLOY que realiza la función de spinners ya que, como muchos ya sabréis, son escasos y difíciles de encontrar.
Este plugin permite generar un elemento de tipo spinner sobre elementos de tipo input type="text" . El plugin generado es accesible mediante teclado.
Los botones + y - pueden activarse mediante teclado situándonos sobre ellos con la tecla TAB y presionando la tecla ENTER para activarlos.
Podemos aumentar o disminuir la cantidad situándonos sobre el número con la tecla TAB y presionando las flechas de izquierda o derecha para disminuir o aumentar respectivamente la cantidad.
Podéis bajaros el código completo de aqui: aui-spinner.rar
Instalación
Para usar este plugin desde el tema de apariencia debemos hacer lo siguiente:
- Añadimos aui-spinner.js a nuestra carpeta javascript: _diffs/js/aui-spinners.js
- Añadimos aui-spinner.css a nuestra carpeta css: _diffs/css/aui-spinner.css
- Añadimos la carpeta de imágenes spinner a la carpeta images del tema de apariencia: _diffs/images/spinner
- Añadimos las referencias al archivo aui-spinners.js y aui-spinners.css en el portal_normal.vm del tema de apariencia.
Uso y Configuración
Para utilizar este plugin sólo debemos añadir lo siguiente al código de nuestro portal:
Donde "option" es cada una de las opciones de configuración que os detallo a continuación:
Option | Descripción | Defecto | Valor |
---|---|---|---|
id | Permite añadir un identificador | "" | String | .
cssClass | Permite añadir clases css | "" | String |
step | Permite configurar el valor numérico que vamos a sumar o restar al interacturar con el plugin | 1 | Valor numérico entero o decimal |
initVal | Valor inicial con el que se inicializa el spinner | 0 | Valor numérico entero o decimal |
max | Límite máximo que puede alcanzar el spinner | 999999 | Valor numérico entero o decimal |
min | Límite mínimo que puede alcanzar el spinners | -999999 | Valor numérico entero o decimal |
type | Tipo de estilo visual con que se muestra el spinner | "horizontal-center" | "horizontal-top","horizontal-center","horizontal-bottom","vertical-left","vertical-center","vertical-right" |
renderTo | Renderiza el spinner dentro del elemento que le indiquemos | "" | Selector CSS |
EJEMPLO DE USO COMPLETO:
Personalización de Estilos
Se puede modificar el fichero aui-spinner.css para modificar el aspecto visual del spinner para que se adapte al diseño de la página web.
Podéis bajaros el código completo de aqui: aui-spinner.rar