Siguiendo con la línea de plugins presentada hace unos días hoy os presento el nuevo creado integramente desde este blog.En esta ocasión le ha tocado el turno a los elementos de tipo select.
Gracias al este plugin podréis cambiar el aspecto visual de los select para darle el que vosotros deseéis.
Está escrito en su totalidad en ALLOY y es compatible para Liferay 6.1. Ofrece todas las funcionalidades cualquier select(incluído los selected y los disabled) pero además nos permite modificar el aspecto a nuestro gusto. Como bien ya sabréis, es cierto que existen numerosos plugin escritos en jQuery que realizan la misma función pero ninguno aprobecha el potencial que ofrece ALLOY y además, nos obliga a añadir una nueva librería al portal.
Como váis a ver a continuación, la instalación y uso del plugin es muy sencilla. El ejemplo está enfocado a añadir lo 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-customSelect.js a nuestra carpeta javascript: _diffs/js/aui-customSelect.js
- Añadimos aui-customSelect.css a nuestra carpeta css: _diffs/css/aui-customSelect.css
- Añadimos la carpeta de customSelect a la carpeta images del tema de apariencia: _diffs/images/customSelect
- Añadimos las referencias al archivo aui-customSelect.js y aui-customSelect.css en el portal_normal.vm del tema de apariencia.
<script type="text/javascript" src="${javascript_folder}/aui-customSelect.js"></script>
<link type="text/css" rel="stylesheet" href="${css_folder}/aui-customSelect.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.customSelect,{
id: "idSelect",
cssClass: "classSelect",
onInit: function(){}
});
});
});
</script>
HTML
<select name="select"> <option value="1">Valor1</option> <option selected value="2">Valor2</option> <option value="3">Valor3</option> <option value="4">Valor4</option> </select>
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 |
| 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 |
| onOpen | Permite lanzar una función cuando se despliegan las opciones del combo. | function(){} | function |
| onClose | Permite lanzar una función cuando se cierran las opciones del combo. | function(){} | function |
Se puede modificar el aspecto del elemento cambiando la imagen o modificando el archivo aui-customSelect.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.1.
Por último, podéis descargaros el plugin desde el siguiente enlace: descargar aui-customSelect