Tags jquery

Novedades en jQuery 1.7

jquery-logo

Por fin se ha liberado jQuery 1.7 y por ello te presento las nuevas características que incluye este poderoso framework que te ahorrará mucho trabajo a la hora de desarrollar sitios Web dinámicos

Función on() y off()

Los eventos bind(), unbind(), delegate() y undelegate() se han unificado en tan solo dos métodos on() y off().

$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [ events ] [, selector] [, handler] );

En caso de especificar un selector la funcionalidad ejecutadra será la de delegate(), en caso contrario la de bind().

Además de unificar la sintaxis se han realizado mejoras sustanciales al rendimiento de los eventos delegados.

 

Asynchronous Module Definition (AMD)

jQuery 1.7 incorpora soporte para la especificación AMD la cual define un mecanismo para definir y cargar asíncronamente tanto módulos como sus dependencias.

La integración permite que los Loaders controlen la carga y el evento ready esté sujeto a la carga de los módulos y dependencias especificadas.

jQuery.deferred

jQuery Añade varias a esta API para mejorar el control y monitorización durante la ejecución de las colas.

Soporte de Html5 en Internet Explorer 6,7 y 8

Internet Explorer 6,7 y 8 no “entiende” los nuevos tags de html5, por lo que los elimina del DOM. jQuery 1.7, a través de HTML5Shiv, añade mejoras para dar soporte a esos tags.

 

Además de éstos cambios, jQuery 1.7 contiene 100 soluciones a bugs encontrados por la comunidad de desarrolladores.

Si lo deseas puedes tener un Wallpaper bastante funcional con todos los eventos, selectores, efectos y atributos… de tu framework favorito.

 

jquery12_colorcharge

Fuente | GenbetaDev

 

Tags , , ,

Valor de un input tipo Select con JQuery

Si estas trabajando con formularios en JQuery y debes obtener el valor del elemento que se tiene seleccionado, solo debes de poner a tu input un ID o una clase que pueda leer para que obtengas su valor:

<select id=”nombre_select”>

<option value=”1″> opcion 1</option>

<option value=”2″> opcion 2</option>

</select>

 

Con JQuery recuperarás su valor de la siguiente forma:

(“#nombre_select :selected”).text();

 

Ahora si tienes un select multiple solamente debes de recorrer los elementos para conocer cuales tienen la selección:

$(‘#nombre_select:selected’).each(function(i, selected){
tu_array[i] = $(selected).text();
});


$(#multiple :selected).each(function(i, selected){
  foo[i] = $(selected).text();
});
Tags , , , ,

Algunos trucos de programación en JQuery

Colocar a los enlaces el target = _blank

$(‘a[@rel$='external']‘).click(function(){
this.target = “_blank”;
});
// uso: <a href=”http://www.carlosnuel.com/” rel=”external”>carlosnuel.com</a>

Conocer el número de elementos de una clase, objeto, propiedad, etc

$(‘elemento’).size();

Deshabilita el clic derecho en una página Web

$(document).bind(“contextmenu”,function(e){
return false;
});

Validar que un elemento exista

if ($(‘#id’).length) {

// acciones…

}

Duplicar un objeto con JQuery

var cloned = $(‘#id’).clone();

Haz un redirect con JQuery

$(location).attr(‘href’,'http://www.carlosnuel.com’);

Tags , , , , , , , ,

Codigos imprescindibles al usar jQuery

Validar si un elemento tiene una clase:

$(id).hasClass('miclase')

Agregar o cambiar una hoja de estilos con jQuery:

$('link[media='screen']').attr('href', 'otroestilo.css');

Obtener los hermanos de un elemento:

$("div").siblings()

Contar los hijos de un elemento

$("#midiv > div").length;

Validar un correo electrónico

jQuery.fn.correo=function()
{
if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($(this).val()))
return true;
else
$(this).focus();
return false;
}
Tags , , , ,

Solución al problema con JCarousel y Thickbox para mostrar la siguiente imagen

Con el plugin de JCarousel la opción que nos permite en el popup modal que se carga con Thickbox para cambiar imagen no esta disponible y esto es por una pequeña falla en la forma como se leen las imagenes del jcarousel,si abrimos el archivo thickbox.js veremos la siguiente línea:

TB_TempArray = $(“a[@rel="+imageGroup+"]“).get();

Y con ella se intenta obtener todas las imagenes que estan con el atributo rel asignado. La solución que encontre para que éste plugin funcione correctamente es colocandole una clase donde se construye la imagen y el enlace, para que quede así:

< a title=” + item.title + ” class=”thickbox“  rel=”a1″ href=” + url_m + “></a>

Y el selector que busca las imagenes quedaria asi:

TB_TempArray = $(“.thickbox“).get()

Tags , , , , , , ,