|

Lista de ejemplos para jQuery

ByLuis

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.

Similar Posts

| |

Funciones anónimas y autoejecutables en javascript

ByLuis

¿Sabías que en javascript una función puede contener a otras? Pues ahora ya lo sabes. Fíjate en el siguiente código:
function barrioSesamo() {
function epi() {
alert(‘hola Blas’);
}
function blas() {
alert(‘hola Epi’);
}
epi();
blas();
}
barrioSesamo();
// el navegador nos presentará un par
// de alertas, a saber, “hola Blas” y
// “hola Epi”
Nada impresionante, por el momento. Lo interesante del asunto es que, al definir la función `epi` dentro de la función `barrioSesamo`, el ámbito de la misma (scope) queda limitado, de manera que solo podemos llamar a `epi` desde su propio barrio.
Vale, sigo sin impresionarte.

Read More “Funciones anónimas y autoejecutables en javascript”

| |

Laboratorio: realizar drag and drop de elementos HTML

ByLuis

Dentro de la Web 2.0 se intentan hacer cosas menos web y más tipo aplicación de escritorio. Una de estas cosas es realizar un drag and drop. Esto nos puede ser útil para interactuar con elementos, por ejemplo, tenemos una lista de productos, pinchamos en uno y arrastramos en otro, obteniendo una comparativa de los productos. Bueno, las aplicaciones que le podemos dar depende de nuestras necesidades y de nuestra imaginación. Eso sí, la forma de realizarlo es la misma.
drag.png
En el ejemplo que hemos creado, hacemos que el elemento seleccionado se posicione encima del elemento sobre el que realizamos el drop. También hay que tener en cuenta, que en este caso, el drag&drop que hacemos es pinchando-moviendo-pinchando, no pinchando-moviendo-soltando. Realmente también se podría hacer así, pero como lo hemos hecho válido para texto, si lo hacemos de la manera normal, se podría ir seleccionando el texto según se mueve el ratón.

Read More “Laboratorio: realizar drag and drop de elementos HTML”

Backgrounds animados con jQuery

ByLuis

Interesante script para jQuery que usa el plugin para modificar la posición del background y que nos permite hacer efectos con el background similares a los que se suelen hacer con Flash.

Mediante un fondo de mayor tamaño que el elemento y con una forma irregular (esquinas, ondas, degradado, …) se trata de que al mover el fondo, el efecto que se produzca sea el de una animación.

El script sería algo así:

$('#nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -250px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})

Using jQuery for Background Image Animations

Vía / Script & Styles

Crear una nube de etiquetas con jQuery

ByLuis

Aunque las nubes de etiquetas ya no están tan de moda como hace un tiempo, el tutorial donde explican cómo hacer un tagscloud mediante jQuery merece la pena, ya que se trata de una explicación detallada.
No solo se centra en jQuery, sino en la parte PHP que devuelve los datos en JSON y en los estilos CSS para mostrar las etiquetas según su relevancia.
Realmente la parte jQuery solo cambia el tamaño de la letra según la frecuencia de la etiqueta.
Building a jQuery-Powered Tag-Cloud

|

Tiled Based Vector & Raster Maps using SVG and Javascript

ByLuis

Polymaps is a display and interaction library for tile-based vector and raster maps using SVG and Javascript. Their intent is to provide a minimal, extensible, customizable, and free display library for discriminating designers and developers who want to use interactive maps in their own projects.Polymaps provides speedy display of multi-zoom datas …

Post original