Travailler avec des sites Web à une seule page et maintenir l'état en utilisant un hash d'URL et jQuery

Je travaille sur mon portfolio, le rendant entièrement basé sur jQuery. Donc, mon problème est lorsque vous allez à une page, puis rafraîchir, puis il vous ramènera à la page d'accueil. J'ai donc deux questions, en fait.Travailler avec des sites Web à une seule page et maintenir l'état en utilisant un hash d'URL et jQuery

Comment (via jQuery/Javascript) obtenir un "code de hachage" de l'url?
1. E.G. Je veux que la partie en gras ceci: http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign
Comment changer vous l'URL dans la barre d'adresse lorsque vous accédez à une nouvelle page pour contenir le code de hachage pour cette page?
1. E.G. quand vous allez la page graphicsDesign, le lien dans les changements de barre d'adresse pour http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign

Source

2010-11-06 Entity

Notez également que si vous espérez Google pour indexer vos pages, vous pouvez vous retrouver avec une seule page pour Google à indexer. Donc, à des fins de SEO c'est probablement un cauchemar. –

solution: http://www.asual.com/jquery/address/docs/ – tetris

En réponse à Nathan .. Je suis d'accord. Cela créera du contenu dupliqué car toutes les dates sur vos pages sont les mêmes pour les moteurs de recherche. Les changements de vue sont seulement sur le front-end mais Google indexe tout! –

Vous faites le point d'ancrage à un lien interne comme ceci:

<a href="#graphicsDesign">Graphics</a>

Et puis il suffit de faire jQuery répondre à l'événement click et laisser le navigateur suivre naturellement le lien interne. Le navigateur devrait maintenant avoir le lien interne dans sa barre d'adresse. Vous pouvez utiliser le code JavaScript suivant pour analyser the URL, puis charger la partie correcte du document HTML. Vous devrez écrire le code afin que le contenu correct soit chargé en fonction de l'adresse interne du navigateur.

if(window.location.hash === "graphicsDesign" || 
window.location.hash === "somethingElse") { 
    loadContent(window.location.hash); 
}

Source

2010-11-06 14:07:46 Sam152

Toutes les pages sont contenues dans un document html, et jQuery cache tous sauf un lors du chargement de la page. Donc, j'ai besoin d'obtenir le code de hachage en javascript pour que je puisse dire à quelle page jQuery montrer. – Entity

Commencez avec tous les divs cachés et laissez – hybernaut

Le '' hash === "graphicsDesign" 'devrait avoir un hash devant lui comme ~' hash === "#graphicsDesign" '@ Sam152 –

Utilisez l'un des nombreux plugins d'historique disponibles, par ex. ici: http://plugins.jquery.com/project/jquery-history-web-2-0-hashchange-history-remote

Source

2010-11-06 14:18:33

Ceci est utilisé plus de sorte que vous pouvez lier quelqu'un d'autre et le bon contenu sera chargé, pas tellement que vous serez en mesure de naviguer dans les deux sens. – Sam152

Il fera également fonctionner les boutons Précédent et Suivant comme prévu, et permettra à la page de recharger dans l'état correct après un rafraîchissement –

Le plugin jQuery BBQ ("Back Button & Query") est assez bon aussi. http://benalman.com/projects/jquery-bbq-plugin/

Source

2010-11-06 15:22:00 leppert

Ce n'est pas la façon dont les sites web sont généralement construits, donc dans un sens, vous nagez en amont. Cela a peut-être semblé le chemin le plus court quand vous avez commencé, mais vous trouverez probablement que vous devez faire beaucoup plus de travail à la suite de votre décision initiale. Cela dit, assurez-vous de commencer avec tous les divs cachés, puis affichez celui qui est sélectionné.

Je recommande également le plugin BBQ Cowboy qui vous aider à composer avec bouton de retour ainsi que reload: http://benalman.com/projects/jquery-bbq-plugin/

Source

2010-11-06 15:43:38 hybernaut

Travailler avec des sites Web à une seule page et maintenir l'état en utilisant un hash d'URL et jQuery

Répondre

Questions connexes