Spinners con ALLOY

por

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 1Valor numérico entero o decimal
initVal Valor inicial con el que se inicializa el spinner0 Valor numérico entero o decimal
max Límite máximo que puede alcanzar el spinner999999 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

COMENTARIOS

DEJA TU COMENTARIO