Foros del Web » Programando para Internet » Jquery »

URLS con Jquery

Estas en el tema de URLS con Jquery en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/03/2010, 06:57
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 11 años, 3 meses
Puntos: 1
URLS con Jquery

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!
  #2 (permalink)  
Antiguo 10/03/2010, 08:35
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 10 años, 1 mes
Puntos: 65
Respuesta: URLS con Jquery

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

hace lo que pedis y funciona el boton volver para atras y adelante
  #3 (permalink)  
Antiguo 10/03/2010, 09:38
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: URLS con Jquery

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

No sé por donde empezar...
  #4 (permalink)  
Antiguo 10/03/2010, 09:53
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 10 años, 1 mes
Puntos: 65
Respuesta: URLS con Jquery

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
  #5 (permalink)  
Antiguo 10/03/2010, 16:12
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 10 años, 6 meses
Puntos: 2
Respuesta: URLS con Jquery

Si consigues hacerlo postea un ejemplo por favor, me vendría bien
  #6 (permalink)  
Antiguo 10/03/2010, 16:23
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 10 años, 10 meses
Puntos: 101
Respuesta: URLS con Jquery

Estaría buenísimo!
  #7 (permalink)  
Antiguo 11/03/2010, 07:21
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 10 años, 1 mes
Puntos: 65
Respuesta: URLS con Jquery

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
  #8 (permalink)  
Antiguo 11/03/2010, 08:55
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 10 años, 6 meses
Puntos: 2
Respuesta: URLS con Jquery

Gracias por compartirlo
  #9 (permalink)  
Antiguo 20/09/2011, 11:05
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.672
Antigüedad: 18 años, 1 mes
Puntos: 16
Respuesta: URLS con Jquery

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

lo hice asi, por si les sirve:
Código Javascript:
Ver original
  1. $.history.init(function(hash){
  2.         if(hash == "") {
  3.             $('#contenido_pagina').load('conocenos.asp');
  4.         } else {
  5.             $('#contenido_pagina').load(hash + '.asp');
  6.             [COLOR=Red]document.getElementById(hash).className=hash+"2";[/COLOR]
  7.         }
  8.     },
  9.     { unescape: "/" });

La linea marcada la uso para que se active el menu actual
  #10 (permalink)  
Antiguo 18/05/2012, 08:58
 
Fecha de Ingreso: enero-2008
Mensajes: 571
Antigüedad: 12 años
Puntos: 9
Respuesta: URLS con Jquery

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 Ver Mensaje
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

Última edición por quico5; 18/05/2012 a las 09:11
  #11 (permalink)  
Antiguo 18/05/2012, 11:31
 
Fecha de Ingreso: enero-2008
Mensajes: 571
Antigüedad: 12 años
Puntos: 9
Respuesta: URLS con Jquery

reemplazando esto me funciona


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

Última edición por quico5; 18/05/2012 a las 11:59

Etiquetas: url
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 15:04.