Archivo categoría jQuery
Estilando checkbox de formularios usando jQuery+CSS
Por admin - Ajax, Programación, jQuery - Sábado, 8 mayo 2010
Estilar nuestros checkbox en formularios se puede hacer facil usando jQuery. Partiendo de una lista de opciones en formato HTML, un SPRITE para el rollover del estado del checkbox y un poquito de código en jQuery y ya podremos tener unos checkbox de lo mas originales para todos los formularios que desemos utilizar. Con un poquito de imaginación y retocando el sprite y la hoja de estilos podremos darle otra apariencia mas acorde a lo que estemos buscando.
El ejemplo en cuestión tiene dispnibles 3 set disponibles para elegir. Adjunto el PSD con el SPRITE que ha creado el autor para el intercambio de imagen cuando hacemos click en el checkbox. Podéis retocarlo a vuestro gusto o también es posible crear uno de cero tirando de imaginación.
Los métodos y eventos de JQuery que se han usado para crear este ejemplo son los siguientes:
- click(): evento usado para cuando hacemos click con el ratón.
- parent(): Consigue el padre del elemento que seleccionemos.
- addClass() y removeClass(): método muy útil en este ejemplo para asignar o remover clases.
- attr() y removeAttr(): método para conseguir o remover atributos.
- preventDefault(): alterar comportamientos.
- find(): método que nos permitirá encontrar algo en concreto.
- fadeIn() y fadeOut(): son métodos para ocultar o mostrar elementos usando transparencias.
Fuentes:
http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery
http://combinedartsmedia.com/sean/check-boxes_and_radio-buttons/
refresh & reload + setInterval con ajax y jQuery
Por admin - Ajax, Programación, jQuery - Domingo, 25 abril 2010
Frecuentemente a la hora de programar necesitamos refrescar y cargar contenido en una capa y que ejecute un fichero cada x segundos. Esta práctica es muy útil en chats, blogs, e-commerce, cms, etc … El siguiente ejemplo actualiza el contenido de una capa cada 10 segundos y carga en ella el contenido del fichero que le indiquemos. El efecto de fundido usando fadeOut y fadeIn es para darle más dinamismo al script.
<script>
function actualizar(){
$('#capa').fadeOut("slow").load('fichero.php').fadeIn("slow");
}
setInterval( "actualizar()", 10000 );
</script>
<div id="capa"></div>
click aquí para ver una pequeña demostración.
Tenéis más documentación de los métodos y funciones usados en el ejemplo a continuación. Haz click en los enlaces para obtener más información:
- .load() es el método de JQuery usado para cargar los datos desde servidor y la cual nos retornará los resultados en formato HTML.
- fadeOut() es un método de jQuery para ocultar elementos usando transparencias.
- fadeIn() es un método de jQuery para mostrar elementos usando transparencias.
- setInterval es una función JavaScript que nos permitirá ejecutar una función cada X segundos que le indiquemos.