domingo, 4 de marzo de 2012

Función Loading para AJAX

A continuación muestro una función para el uso de AJAX.

NOTA: La ruta de la imagen la tendrán que poner correctamente ustedes. Esta probado en IE8, FF 10.0.2 Chrome 17.0.963.56 m. La versión de JQuery es 1.4.2 que pueden descargar desde http://docs.jquery.com/Downloading_jQuery

Para crear su propia imagen del Loading, les recomiendo la página http://ajaxload.info/ donde hay vario tipos y pueden personalizar la imagen.


function loading(val) {
//val = 1 it is for create loading
//val = 0 it is for destroy it
if (val) {
var div = document.createElement("div");
var width = $(document).width() - 1;
var height = $(document).height();

$(div).attr("id","loadingDiv");

$(div).css({
"visility":"visible",
"position":"absolute",
"z-index":"100000",
"background-color":"#000",
"width":width+"px",
"height":height+"px",
"left":"0px",
"top":"0px"
}).fadeTo("slow",0.5);;

var heightWin = $(window).height();
var widthWin = $(window).width();
var img = document.createElement("img");

$(img).attr("src", "ruta/de/mi/imagen.gif");

var widthImg = img.width;
var heightImg = img.height;

var left = (widthWin - widthImg) / 2;
var top = (heightWin - heightImg) / 2;

$(img).css({"position":"relative", "left":left, "top":top })

$(div).append(img);


$("body").append(div);
}
else {
$("#loadingDiv").remove();
}
}

Espero que sea de bastante utilidad, cualquier duda

Saludos

jueves, 1 de marzo de 2012

Algunos selectores en JQuery Parte 2

Anteriormente ya he escrito sobre este tema, solo me gustaría amplearlo ya que si manejas bien este tema te puedes ahorrar muchos ciclos para buscar un objeto en determinada posición, por ejemplo en un arreglo de <li> posicionarte en el ultimo, el primero, etc.


:last-child indica posicionarte sobre el ultimo objeto de un arreglo de posiciones de la misma clase. Ej:


<ul><li>Valor1</li><li>Valor2</li><li>Valor3</li></ul>


alert($("ul li:last-child").html())  // Esta linea de código regresa el valor HTML <li>


.last() Indica lo mismo que el anterior, también te posiciona sobre el ultimo objeto, si nos situamos sobre el ejemplo anterior.


alert($("li").last().html()); // retorna Valor3


Por cuestiones de tiempo este tema será expandido después, pero si hay dudas pueden preguntar.