pushState() et popState() pour débutant
Salutation à tous.
Je suis vraiment un débutant dans ce domaine, et j'aimerais obtenir votre aide si ce n'est trop demandé.
J'ai cherché une méthode pour afficher le contenu d'une page web à un autre, sans modifier la structure permettant d'avoir des éléments tels qu'un lecteur audio, etc.
Grâce au site suivant, j'ai trouvé le code source dont j'ai besoin... http://html5.gingerhost.com/
Javascript
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| // THIS IS WHERE THE MAGIC HAPPENS
$(function() {
$('nav a').click(function(e) {
$("#loading").show();
href = $(this).attr("href");
loadContent(href);
// HISTORY.PUSHSTATE
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
$("#loading").show();
console.log("pathname: "+location.pathname);
loadContent(location.pathname);
};
});
function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT
$.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
// THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
$.each(json, function(key, value){
$(key).html(value);
});
$("#loading").hide();
});
// THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
$('li').removeClass('current');
$('a[href="'+url+'"]').parent().addClass('current');
} |
Le seul problème est, que j'ignore comment l'intégrer dans mon 'index' : je voudrais prendre les liens dans la partie Navigation, et afficher le contenu dans un 'div' / 'td' / 'article' ...
Voici mon index :
HTML
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <body>
<!-- NAVIGATION BAR -->
<nav>
<ul>
<li class="navUrl"><a href="/">Home</a></li>
<li class="navUrl"><a href="about_me.php">About Me</a></li>
<li class="navUrl"><a href="contact.php">Contact</a></li>
<li class="navUrl"><a href="donation.php">Donation</a></li>
</ul>
</nav>
<main>
<div id="loading"></div>
<table>
<tr>
<td>Partie Gauche considérée comme "ASSIDE"</td>
<td id="wrapper">
Partie Droite "ARTICLE" : c'est ici que l'on affiche le contenu des pages...
</td>
</tr>
</table>
</main>
</body> |
