URLS con Jquery

hinfra · #1 (**permalink**) 10/03/2010, 06:57

Saludos,

Últimamente estoy creando bastantes cosillas con Jquery y me he topado con un problema bastante importante.

Normalmente, lo que hago es crear algunos DIVS que permanecen ocultos ocultos hasta que el usuario los llama y se hacen visibles. Si la página es muy grande y no me puedo permitir tener 300 DIV ocultos, llamo a las nuevas páginas mediante AJAX.

El problema es que, con los dos métodos, todo se carga como si de una animación se tratara en la raíz del dominio. Por ejemplo: http://www.midominio.com/# Como una película de Flash.

Lo que me gustaría hacer ahora es que cuando el usuario entre en una sección, la URL cambie a http://www.midominio.com/seccion1 y evidentemente que cuando este la introduzca en su navegador, le cargue la página solo con la sección1.

No sé si me explico... Esta página hace exactamente lo que quiero expresar http://thinkav.co.nz/ Va cambiando las URLs sobre la marcha, y si entras directamente, por ejemplo a http://thinkav.co.nz/#home-automation.html te carga directamente esa sección en concreto.

No creo que sea extremadamente difícil porque lo he visto en bastantes sitios, pero buscando en Google no encuentro nada... será que no sé que buscar exactamente.

Si me podéis echar una mano estaría muy agradecido, me estoy metiendo en el mundillo de Jquery de lleno.

Y si es demasiado complicado, con unos links para indagar sobre el tema ya me apaño.

¡Gracias!

Dany_s · #2 (**permalink**) 10/03/2010, 08:35

fijate este plugin http://www.mikage.to/jquery/jquery_history.html

hace lo que pedis y funciona el boton volver para atras y adelante

hinfra · #3 (**permalink**) 10/03/2010, 09:38

¿El plugin que posteas no tiene documentación no?

No sé por donde empezar...

Dany_s · #4 (**permalink**) 10/03/2010, 09:53

no enontre la doc

pero hay varios

http://benalman.com/code/projects/jq...ba-bbq-js.html
http://www.balupton.com/projects/ajaxy/demos/history/

busca los plugin en la pagina de jquery
http://plugins.jquery.com/search/nod...history?page=2

tempto · #5 (**permalink**) 10/03/2010, 16:12

Si consigues hacerlo postea un ejemplo por favor, me vendría bien

mayid · #6 (**permalink**) 10/03/2010, 16:23

Estaría buenísimo!

Dany_s · #7 (**permalink**) 11/03/2010, 07:21

usando el plugin de http://www.mikage.to/jquery/jquery_history.html

crea 3 páginas con nombre
uno.html
dos.html
tres.html
esos html van a ser los que se van a cargar

lo que inicio es historyInit, va la página inicial, el index o la pagina donde se inicia el plugin
$.historyInit(pageload, "index.html");

la función pageload es la que se encarga de llamar y cargar las paginas

Código HTML:

	function pageload(hash) {
		// alert("pageload: " + hash);
		// hash doesn't contain the first # character.
		if(hash) {
			// restore ajax loaded state
			if($.browser.msie) {
				// jquery's $.load() function does't work when hash include special characters like aao.
				hash = encodeURIComponent(hash);
			}
            $("#load").load(hash + ".html");
		} else {
			// start page
			$("#load").empty();
		}
	}

a pageload se le pasa como parámetro la que contiene el ancla por ej si la url es .html#uno
el parámetro hash va a contener "uno", fijense que load tiene como parámetro hash + ".html" entonces va a quedar load(uno.html)

lo saca del valor del href en el evento click del enlace

Código HTML:

            var hash = this.href;
            hash = hash.replace(/^.*#/, '');

encontes para hacer referencia el link con las paginas ponen en el href "#uno" o sea que el link va a hacer referencia al archivo uno.html, para hacer referencia a dos.html el href tiene que ser "#dos"

el contenido de las paginas lo carga en un elemento con id "load" $("#load").load(hash + ".html");

el código completo

Código HTML:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://www.mikage.to/jquery/jquery.history.js"></script>
  <script>
	function pageload(hash) {
		// alert("pageload: " + hash);
		// hash doesn't contain the first # character.
		if(hash) {
			// restore ajax loaded state
			if($.browser.msie) {
				// jquery's $.load() function does't work when hash include special characters like aao.
				hash = encodeURIComponent(hash);
			}
            $("#load").load(hash + ".html");
		} else {
			// start page
			$("#load").empty();
		}
	}

    $(document).ready( function (){

        // Initialize history plugin.
        // The callback is called at once by present location.hash.
        $.historyInit(pageload, "prueba.html");

        // set onlick event for buttons
        $("a[rel='history']").click(function(){
            //
            var hash = this.href;
            hash = hash.replace(/^.*#/, '');
            // moves to a new page.
            // pageload is called at once.
            // hash don't contain "#", "?"
            $.historyLoad(hash);
            return false;
        });
    });
  </script>
</head>
<body>
    <a href="#uno" rel="history">Uno</a> - <a href="#dos" rel="history">Dos</a> - <a href="#tres" rel="history">Tres</a>
    <div id="load"></div>
</body>
</html>

creo que eso es todo

tempto · #8 (**permalink**) 11/03/2010, 08:55

Gracias por compartirlo

sjam7 · #9 (**permalink**) 20/09/2011, 10:05

acabo de implementarlo en www.gimnasticolaguna.com y va muy bien

lo hice asi, por si les sirve:

Código Javascript:

Ver original$.history.init(function(hash){
        if(hash == "") {
            $('#contenido_pagina').load('conocenos.asp');
        } else {
            $('#contenido_pagina').load(hash + '.asp');
            [COLOR=Red]document.getElementById(hash).className=hash+"2";[/COLOR]
        }
    },
    { unescape: "/" });

La linea marcada la uso para que se active el menu actual

quico5 · #10 (**permalink**) 18/05/2012, 07:58

http://cateringasmeigas.es/jQuery/

Error

Cita:

uncaught typeerror: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'historyinit' mi-jquery.js:21
(anonymous function) mi-jquery.js:21
f.callbacks.o jquery-1.7.2.min.js:2
f.callbacks.p.firewith jquery-1.7.2.min.js:2
e.extend.ready jquery-1.7.2.min.js:2
c.addeventlistener.b jquery-1.7.2.min.js:2

http://cateringasmeigas.es/jQuery/adjuntos/mi-jQuery.js

Cita:

Iniciado por dany_s

usando el plugin de http://www.mikage.to/jquery/jquery_history.html

crea 3 páginas con nombre
uno.html
dos.html
tres.html
esos html van a ser los que se van a cargar

lo que inicio es historyinit, va la página inicial, el index o la pagina donde se inicia el plugin
$.historyinit(pageload, "index.html");

la función pageload es la que se encarga de llamar y cargar las paginas

Código HTML:

	function pageload(hash) {
		// alert("pageload: " + hash);
		// hash doesn't contain the first # character.
		If(hash) {
			// restore ajax loaded state
			if($.browser.msie) {
				// jquery's $.load() function does't work when hash include special characters like aao.
				Hash = encodeuricomponent(hash);
			}
            $("#load").load(hash + ".html");
		} else {
			// start page
			$("#load").empty();
		}
	}

a pageload se le pasa como parámetro la que contiene el ancla por ej si la url es .html#uno
el parámetro hash va a contener "uno", fijense que load tiene como parámetro hash + ".html" entonces va a quedar load(uno.html)

lo saca del valor del href en el evento click del enlace

Código HTML:

            var hash = this.href;
            hash = hash.replace(/^.*#/, '');

encontes para hacer referencia el link con las paginas ponen en el href "#uno" o sea que el link va a hacer referencia al archivo uno.html, para hacer referencia a dos.html el href tiene que ser "#dos"

el contenido de las paginas lo carga en un elemento con id "load" $("#load").load(hash + ".html");

el código completo

Código HTML:

<!doctype html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://www.mikage.to/jquery/jquery.history.js"></script>
  <script>
	function pageload(hash) {
		// alert("pageload: " + hash);
		// hash doesn't contain the first # character.
		If(hash) {
			// restore ajax loaded state
			if($.browser.msie) {
				// jquery's $.load() function does't work when hash include special characters like aao.
				Hash = encodeuricomponent(hash);
			}
            $("#load").load(hash + ".html");
		} else {
			// start page
			$("#load").empty();
		}
	}

    $(document).ready( function (){

        // initialize history plugin.
        // the callback is called at once by present location.hash.
        $.historyinit(pageload, "prueba.html");

        // set onlick event for buttons
        $("a[rel='history']").click(function(){
            //
            var hash = this.href;
            hash = hash.replace(/^.*#/, '');
            // moves to a new page.
            // pageload is called at once.
            // hash don't contain "#", "?"
            $.historyload(hash);
            return false;
        });
    });
  </script>
</head>
<body>
    <a href="#uno" rel="history">uno</a> - <a href="#dos" rel="history">dos</a> - <a href="#tres" rel="history">tres</a>
    <div id="load"></div>
</body>
</html>

creo que eso es todo

quico5 · #11 (**permalink**) 18/05/2012, 10:31

reemplazando esto me funciona

//$.historyInit(pageload, "paginas/demo.html");
$('section section').load('paginas/demo.html');