Checkboxes y Radio Buttons elegantes con jQuery/CSS
Los formularios forman parte de prácticamente todos los sitos y aplicaciones web de hoy en día. Si bien con la ayuda de CSS simple podemos personalizarlos hasta cierto punto, siempre llega un momento en el que las queridas hojas de estilo ya no pueden ayudarnos, y debemos hecharle mano a nuestro adorado y salvador jQuery.
Imágen extraida del sitio web de prettyCheckboxes
En este post vamos a enfocarnos en los radio buttons y checkboxes, o “botones de opcion” y “casillas de verificación”… como nos guste llamarles.
He probado con varios plugins de jQuery, e incluso personalizarlos bastante, pero considero que prettyCheckboxes es uno de los más sencillos de utilizar. Para incluirlo en tu diseño solo tienes que:
1.- Importar jQuery (por supuesto) y el archivo prettyCheckboxes.js que podrás descargar de este sitio (allí encontraras ejemplos y una explicación mas detallada)
2.- Inicializar prettyCheckboxes (para todos los checkbox y radio buttons de la página):
$(document).ready(function(){
$('input[type=checkbox],input[type=radio]').prettyCheckboxes();
});O inicializarlo solo para algunos elementos de tus formularios:
$(document).ready(function(){
$('input.myCheckbox').prettyCheckboxes();
});Y eso es todo, ahora solo falta personalizar las imágenes (que descargas de la página de prettyCheckboxes para que se vean según tu diseño.
FlexiGrid para jQuery: grilla con todo el poder ajax
Durante un tiempo usé Ext para desarrollo en Javascript, y una de sus grandes ventajas es la gran cantidad de componentes y widgets disponibles. Uno de los que usaba seguidamente era la grilla o grid, con posibilidad de paginado, ordenar columnas, etc.
jQuery también dispone de una muy buena grilla, (more…)
Salió el rc4 para jQuery UI 1.6!
La última versión de jQuery UI es realmente excelente. Se ha creado un nuevo framework css, que facilita mucho la tarea de crear themes, y los themes existentes han sido mejorados y mucho. Se mejoró el datepicker y el soporte para drag and drop.
Se puede bajar desde: http://jquery-ui.googlecode.com/files/jquery.ui-1.6rc4.zip
Árboles con jQuery parte II
Continuando con el post anterior sobre árboles con jQuery, quería comentarles sobre jstree. Éste es un componente jQuery para generar árobles, pudiendo generarlos “on the fly” a partir de listas HTML anidadas. Algunas de sus características son: carga asincrónica, borrar, crear y editar nodos, drag and drop, themes, etc, etc.
Pueden ver algunos demos en esta dirección.
Es algo más complejo jQuery treeView, pero también bastante más versátil.
Cómo mantener tus claves en un sólo lugar, seguras y accesibles desde cualquier lado?
Este idea la leí hace un tiempo en en blog de Joel Spolsky, y realmente me a resultado muy útil. Yo manejo muchas contraseñas, todas mis contrseñas personales, las de mi empresa y muchas de nuestros clientes. Eso hace que siempre esté necesitando una clave o password, en cualquier lugar y que sea imposible que los recuerde todos. Intenté varias opciones, entre ellas, utilizar KeePass Portable. KeePass es un administrador de contraseñas open-source, gratuito y liviano que me ha resultado muy útil y sencillo de utilizar. La versión Portable, permite tenerlo guardado en un pendrive y así llevarlo contigo todo el tiempo, para tener todas las contraseñas en un sólo lugar de forma segura.
Pero esta solución no me convencía del todo, por lo que probé el consejo de Joel. Su solución consiste en registrarse en Dropbox y subir ahí nuestro administrador de contraseñas. Dropbox permite tener una carpeta en nuestra computadora, que estará sincronizada a cada computadora que usemos. Además, podemos ingresar a nuestra cuenta en su sitio web y descargar todos los archivos que tenemos en la carpeta. Cada vez que un archivo cambia, esos cambios serán automáticamente propagados a todas nuestras computadoras. De esta forma tenemos nuestras contraseñas siempre disponibles, actualizadas y seguras.
Alternar colores de las filas de una tabla con jQuery
Éste es un ejemplo contundente de la elegancia y sencillez a la que se puede llegar al utilizar jQuery como framework de desarrollo para javascript. Con sólamente dos líneas de código podemos tener las filas de nuestras tablas pintadas alternadamente y además un efecto de rollover al pasar sobre cada fila. Esto es lo que se conoce como tabla Zebra o Zebra table.
El código jQuery a utilizar es el siguiente:
$(".stripeMe tr").mouseover(function() {
$(this).addClass("over");
}).mouseout(function() {
$(this).removeClass("over");
});
$(".stripeMe tr:even").addClass("alt");
Las tablas a las que quieran agreagar el efecto deben tener la clase “stripMe”. Si quieren tener una fila encabezado de la tabla a la cual no se le aplique el efecto, deben utilizar thead y tfoot para el footer.
Los estilos a utilizar para pintar las filas son: alt y over . Como ven en el código, a las filas impares se le aplica el esitlo “alt” mientras que el estilo “over” es utilizado para destacar las filas cuando el mouse pasa sobre ellas.
Para leer más acerca de esta técnica, pueden visitar este sitio
Desarrollo web moderno
A continuación una gráfica detallando en qué se va el tiempo de un desarrollador web actualmente:
Arboles con jQuery
Hay varias alternativas para implementar árboles con jQuery. Una de las más sencillas que encontré es: jQuery treeView
Para crear el árbol, se arma la estructura utilizando listas html y luego se invoca a $(“#id_ul”).treeview(); y listo!
Ejemplo:
(more…)
Graficas con jQuery
Para uno de nuestros proyectos hemos utilizado para la generación de gráficas uno de los tantos plugins de jQuery: Flot. Como la mayoría de los plugins de jQuery, éste también es extremadamente sencillo de utilizar, y en pocos minutos podremos estar incorporando gráficas a nuestras aplicaciones. Por ejemplo:
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
$.plot($("#placeholder"), [ d1, d2 ]);
Le falta soportar gráficos de torta, pero podemos utilizar la modificación de Flot que se encuentra aquí.
Hasta la próxima!
Nuevo release de jQuery: 1.2.6
El equipo de jQuery liberó la versión 1.2.6 de la excelente libreria jQuery. Las características principales de este release son:
- mejor de performance: Event handling 103, CSS selectors: 13%, .offset: 21%, .css: 25%
- Se agregó al core el plugin Dimensions
Si aún no han probado jQuery, les recomiendo que lo prueben. Pueden conseguirlo en aquí.