Vale, en realidad yo también uso bastante lo que dices. Cuando no se trata de cambiar enteramente de sección, sino modificar pequeñas partes de la página, es mejor usar Ajax, por ejemplo, con una galería de imágenes en la que se cambia solo la imagen que uno selecciona, y no la sección completa. En este caso si está muy bien hacer uso de este método. Te voy a dejar dos códigos que he usado para tales fines.
Antes que nada, he de aclarar que aplicar llamados por Ajax "en limpio" puede volverse complicado, por lo que siempre se recomienda el uso de librerías que facilitan el trabajo, y para estos casos yo siempre uso jQuery. Para llamar esta librería, incluyes este codigo en el header:
Código Javascript :
<script src="<txp:site_url />layout01/jquery-1.4.3.min.js" type="text/javascript" charset="utf-8"></script>
La versión creo que ya va por la 1.4.4... eso que alguien me lo confirme
Para llamar un contenido X o Y, puedes usar lo siguiente:
Código Javascript :
$.get("URLdeTuArchivo.html", function(data) {
$('#idDiv').html(data);
});
Entonces, aca hay un par de cosas que hay que conocer para entender el código:
- jQuery selecciona los elementos del DOM mediante la sintaxis $(elemento), y ese "elemento" se selecciona igual que cuando uno aplica estilos CSS. Por ejemplo, un div con id "contenedor", se selecciona asi: $("#contenedor") y un div con clase "contenedores" se selecciona $("div.contenedores"). Este último acciona sobre todos los divs con esa clase.
- La sintaxis objeto.html(data) lo que hace es insertar lo recibido como html. Si uno va a insertar solo texto, puede usar mejor text()
- el primer parámetro de $.get() es la URL del archivo con el código o el texto que vas a llamar, y la segunda es el conjunto de instrucciones que se ejecutan cuando todo el contenido se cargó exitosamente.
- La función que se va como segundo parámetro, tiene a su vez un parámetro, que equivale a la información recibida. En este caso, se llama "data"
Esto lo puedes colocar como una función, que puede quedar así:
Código Javascript :
function cargarContenidos(urlDatos){
$.get(urlDatos, function(data) {
$('#idDiv').html(data);
});
}
y luego en cada botón
Código HTML :
<a href="javascript:cargarContenidos('url1.html')">Boton 1</a>
<a href="javascript:cargarContenidos('url2.html')">Boton 2</a>
Ahora, para las imágenes, al cosa es un poquito diferente. Va algo asi:
Código Javascript :
var img = new Image();
$(img).load(function(){
$("#divContenedor").html(this);
}).attr('src',"carpeta/imagen.jpg");
La mecánica es parecida, pero la URL de la imagen va al final, donde dice ("src","urlImagen.jpg"). Lo bueno de este método es que pone a descarcar la imagen, y cuando ya está lista, entonces hace lo que dice la funcion de adentro. Con eso puedes controlar que muestre un aviso de espera o similares. Esto igualmente lo puedes encerrar en una función y funciona igual que con el anterior.
Vale
creo que me extendí un poquito, pero ojalá halla quedado claro. Que no te de pena preguntar que para eso estamos!
Si acaso sigue estando muy complicado, que me mandas un PM y te doy mas datos