En esta segunda parte del post anterior, veremos como cargar de forma asíncrona el menú izquierdo, dependiendo de la página mostrada. Además incorporaremos un fading al mostrar los contenidos cargados asíncronamente, de esta manera la experiencia de usuario es mucho más atractiva. Podéis ver como queda en www.openti.net .
Para poder cargar el menú izquierdo de forma asíncrona, crearemos una página php que nos devuelva el contenido de estos menús, y llamaremos con el AJAX de mootools a este php, para recoger el contenido y colocarlo en el div que crearemos en dicha posición.
Primero creamos en la raiz del sitio la página php, mod_left.php, que será una copia de index2.php pero con el final del fichero cambiado, para que no cargue el contenido de un artículo, sino que cargue el menú izquierdo, llamando a:
<?php mosLoadmodules(“left”,-2)?>
<body><?php if(mosCountmodules("left")){ ?><?php mosLoadmodules("left",-2)?><?php } ?></body></html><?php}} else {mosLoadmodules("left",-2);}
Una vez creada esta página tenemos que llamarla desde nuestro fichero ajax.js
function ajaxloadLeftColumn(url){$('ajaxleft').innerHTML=$('loading2').innerHTML;//call showload function to show preloadertry{url = url.replace('index2.php','mod_left.php');new Ajax(url, {//loaded content would be updated inside this divisionupdate: 'ajaxleft',//this should be true if you want to execute JS inside the loaded contentevalScripts: true,onComplete:function(r){//It sets the type property of the script tag,//then puts the script body inside of the element (between the opening and closing script tags),//then injects into the head of the pagevar script = new Element('script')script.setProperty('type','text/javascript');try{script.setHTML(r);}catch(e){}},onSuccess:function(){try{//The ajaxlinks function is being called here,I defined this function in footerajaxLinks();iniciaObjeto($('ajaxleft'));efecto($('ajaxleft'));}catch(e){}}}).request();}catch(e){}}
En la primera línea mostramos la imagen de carga en el div del menú:
$('ajaxleft').innerHTML=$('loading2').innerHTML;
Esta petición asíncrona se ejecutará siempre que se haga una petición de página, mandándole los mismos parámetros que a la petición de la página, de esta manera la función de mosLoadmodules nos devolverá el menú que corresponde a la página que se está pidiendo, con esto para construir nuestra url de petición solo tendremos que hace lo siguiente:
url = url.replace('index2.php','mod_left.php');
A esta url haremos la petición AJAX recogeremos el contenido y lo mostraremos en el div ajaxleft que creamos en la posición de nuestro menú izquierdo en el index.php de nuestra plantilla.
Posteriormente llamamos a las funciones de iniciaOjecto y efecto para obtener el fading, al mostrar el contenido:
function iniciaObjeto(obj){ obj.style.opacity = 0;obj.style.MozOpacity = 0;obj.style.KhtmlOpacity = 0;obj.style.filter = 'alpha(opacity=' + 0 + ')';obj.style.zoom=1;//necesario para Explorer}function setOp(obj, value) {obj.style.opacity = value/100;obj.style.MozOpacity = value/100;obj.style.KhtmlOpacity = value/100;obj.style.filter = 'alpha(opacity=' + value+ ')';obj.style.zoom=1;//necesario para Explorer}function efecto(o){for (var c=0 ; c < 100; c++)(function(c){setTimeout(function(){setOp(o,c);} , 10*c);})(c);}
Es todo es todo, si tenéis alguna duda, o necesitáis los fuentes completos, pedírmelo.
Un Saludo.
2 Octubre, 2009 a las 12:09 am |
hola!, podrias enviarme los fuente por favor?, mi problema es que tengo un menu en left y quiero que cargue el contenido con ajax, he probado varios componentes, entre ellos Joomla!Ajax pero no anda, por favor necesito una ayuda para esto…ya me tiré medio google buscando y solo aqui veo algo como lo que necesito, solo que no quiero recargar el menu lateral….
Saludos!