Lista de ejemplos para jQuery

ByLuis January 19, 2007

Una de las formas que mÃ¡s me gusta para entender alguna librerÃa nueva es mediante ejemplos. Si ayer realizÃ¡bamos un ejemplo, con jQuery hoy os paso una pequeÃ±a lista con ejemplos donde se usa esta librerÃa.

Javascript

Algunos scripts para jQuery

ByLuis October 30, 2008

He encontrado en Script & Style algunos scripts/pluigns para jQuery que son interesantes:

Linkselect: transforma elementos select en listas de enlaces con forma de select.
URL parser: nos permite obtener datos de una URL: protocolo, query, puerto, …
Virtual jQuery Keyboard: añade un teclado virtual a cajas de texto
Word-counter for textarea: el título lo dice todo, cuenta las palabras que hay en un textarea
Smooth popup: crear un popup no modal
idTabs: ayuda a crear pestañas de forma sencilla
dwFadingLinks: crea el efecto fadding en los links cuando se produce un onmouseover
ColorPicker: selector de color

AJAX | Tutoriales

Escritorio AJAX estilo Netvibes

ByLuis June 27, 2006

Interesante y extenso tutorial sobre cÃ³mo realizar un escritorio AJAX del estilo Netvibes. El escritorio del ejemplo consta de una barra de accesos directos y de widgets (ventanas que muestran informaciÃ³n).

El tutorial explica varios temas distintos, que juntos hacen posible el escritorio AJAX:

CÃ³mo detectar IE/Firefox correctamente: no sÃ© si es la forma mÃ¡s correcta de hacerlo, pero estÃ¡ claro que funciona, al menos solo cuando quieres detectar Firefox e IE, no sÃ© que pasarÃ¡ con otros navegadores como Safari y Opera. Hay que tener en cuenta que el autor solo se ha centrado en estos navegadores.
QuÃ© es el DOM y cÃ³mo manipularlo mediante Javascript: la explicaciÃ³n grÃ¡fica me parece muy clara, y la forma de obtener los distintos nodos, aunque ya puestos, la creaciÃ³n de nuevos nodos tambiÃ©n la habrÃa explicado mediante el DOM y no sÃ³lo mediante innerHTML.
CÃ³mo crear widgets dinÃ¡micamente mediante el DOM: los amigos de las tablas estarÃ¡n en la gloria, para el resto, una tila para calmar los nervios.
CÃ³mo capturar y usar eventos del ratÃ³n: lo mismo de siempre, el problema en IE y Mozilla, IE tiene el objeto event y Mozilla lo pasa como parÃ¡metro.
CÃ³mo desplazar widgets: yo prefiero meter los eventos onmousemove, onmouseup y onmousedown directamente en el body y no capturarlo mediante Javascript, si se les pasa a la funciÃ³n el objeto event, funcionarÃ¡ tanto para IE como para Mozilla y no habrÃ¡ que estar chequeando cual es el navegador.
CÃ³mo manipular el orden en profundidad de los widgets: uso del zIndex.
IntroducciÃ³n a AJAX y JSON: una breve explicaciÃ³n de AJAX y JSON.
CÃ³mo cargar feeds en los widgets: explica cÃ³mo se usa una API especÃfica para ello.
CÃ³mo crear widgets para bÃºsquedas: tambien mediante una API.
Recursos para leer: sobre AJAX, JSON, DOM, eventos y Javascript. Una buena recopilaciÃ³n.

AJAX Desktop Tutorial

VÃa / Pixel Groovy

Javascript

Bug en el método UTC del objeto Date de Javascript

ByLuis April 2, 2008

O al menos en Firefox. Se trata de que si quiero obtener el timestamp de una fecha usando el método Date.UTC me devuelve datos incorrectos.
Por ejemplo, en esta llamada Date.UTC(2008, 3, 2, 18, 33, 32) (el mes es abril porque empieza desde 0), se verá que da un el timestamp 1207161212000, mientras que si creamos un objeto Date y obtenemos su timestamp (new Date(2008, 3, 2, 18, 33, 32)).getTime() obtenemos el timestamp 1207154012000, habiendo 2 horas de diferencia.
Habrá que tener cuidado

Javascript | PHP | Quicklinks

Building a Sleek AJAX Email Signup Form

ByLuis August 30, 2010

In this tutorial, we’ll learn how to create a slick email signup form. This form will harness the full power of AJAX, meaning that we will submit data to the server, validate it, and receive a response – all without a single page refresh! Along the way, you should pick up some useful tips related to PHP and JavaScript, as well as general programming …

Post original

How to | Javascript

Resaltar filas en tablas mediante Javascript

ByLuis March 30, 2006

A la hora de mostrar tablas, un modo de presentación muy recomendable es resaltar las filas alternas como por ejemplo hace la lista de actualizaciones de Bitacoras.com consiguiendo así una mayor facilidad a la hora de leer los datos. Para ello, se suelen usar un estilo para las filas pares.

Javascript

Laboratorio: eliminar HTML en cajas de texto con jQuery

ByLuis September 30, 2008

Trasteando un poco con jQuery me ha dado por hacer una función que elimina las etiquetas HTML de una caja de texto de un formulario. Esto puede ser necesario cuando no se quiere que se introduzca HTML en un campo. Lógicamente, esto es la parte cliente, en el servidor debería haber una función similar que lo hiciera.

La función es sencilla, en cada input:text añadimos el evento change para que cuando se modifique el contenido, se ejecute la función de strip_tag, la cual crea un elemento DIV auxiliar, hago que su contenido sea el valor de la caja de texto, me quedo son con el texto e inserto este valor en el input:

$('document').ready(function() {
$(':text').change(function() {
$(this).attr('value', $('document').add('<div></div>').html($(this).attr('value')).text());
});
});

¿Dudas?, alguna. Si entre el texto pongo un <script>alert(1);</script> me ejecuta el script, algo no muy elegante. ¿Qué pasa con el elemento DIV creado?, ¿se queda en el limbo o se destruye?.

Bueno, para mis primeras pruebas con jQuery no está mal del todo.

Similar Posts