Hoy os presento el primer plugin creado desde este blog 100% en alloy. Es único en su clase y no podréis encontrar nada igual en ningún otro sitio ya que como sabéis existe una escasez enorme en cuantoa plugins de ALLOY.
Gracias al este plugin podréis cambiar el aspecto visual de los checkbox y radio buttons para darle el que vosotros deseéis.
Existen mucho plugins de este tipo escritos en jQuery, en este mismo blog podréis encontrar alguno, pero gracias a este plugin podréis evitar el añadir la librería adicional de jQuery en vuestro proyecto y utilizar el potencial que nos brinda ALLOY UI.
Como váis a ver a continuación, la instalación y uso del plugin es muy sencilla. El ejemplo está enfocado a añadirlo desde el tema de apariencia aunque se podría hacer de la misma forma desde un portlet.
Desde el tema de apariencia debemos añadir lo siguiente:
- Añadimos aui-customCheckRadio.js a nuestra carpeta javascript: _diffs/js/aui-customCheckRadio.js
- Añadimos aui-customCheckRadio.css a nuestra carpeta css: _diffs/css/aui-customCheckRadio.css
- Añadimos la carpeta de customCheckRadio a la carpeta images del tema de apariencia: _diffs/images/customCheckRadio
- Añadimos las referencias al archivo aui-customCheckRadio.js y aui-customCheckRadio.css en el portal_normal.vm del tema de apariencia.
<script type="text/javascript" src="${javascript_folder}/aui-customCheckRadio.js"></script>
<link type="text/css" rel="stylesheet" href="${css_folder}/aui-customCheckRadio.css"/>
Una vez hecho esto ya estará incluído el plugin y tan solo deberemos inicializarlo. Para ello debemos añadir el siguiente código a nuestro portal:
JS
<script type="text/javascript">
AUI().ready(function(A){
A.use("node", "basic-plugin", function(A) {
A.one("#input").plug(A.MkPlugins.customCheckRadio,{
id: "idInput",
cssClass: "classInput",
onInit: function(){}
});
});
});
</script>
HTML
<input type="checkbox" name="input1" id="input" />
Existen diferentes options configurables que podemos modificar a nuestro gusto:
| Option | Descripción | Defecto | Valor |
|---|---|---|---|
| id | Permite añadir un identificador | " " | String |
| cssClass | Permite añadir clases css | " " | String |
| src | Permite establecer la ruta de la imagen que se muestra en vez del input. | Obtiene el valor del propio aui-customCheckRadio.css. | String |
| onInit | Permite lanzar una función una vez inicializado el plugin. | function(){} | function |
| onRender | Permite lanzar una función una vez el plugin esta cargado por completo. | function(){} | function |
| onChange | Permite lanzar una función cada vez que el valor de los inputs cambia. | function(){} | function |
Se puede modificar el aspecto del elemento cambiando la imagen o modificando el archivo aui-customCheckRadio.css.
Recordad que este tipo de plugins solo funcionan bajo el CMS Liferay y que fuera de ellos no funcionará ya que necesita ALLOY UI. El plugin funciona para version Liferay 6.+ que son las que actualmente llevan ALLOY UI incorporado.
Por último, podéis descargaros el plugin desde el siguiente enlace: descargar aui-customCheckRadio