Ubuntu-fr

Morgiver

[RESOLU] Problème avec la fonction load() et les ancre

SUJET RÉSOLU VOIR MON DEUXIÈME POST POUR LA SOLUTION

Salut,

Bon voilà, j'ai un petit soucis avec la fonction load() et les ancres.

J'ai donc une page HTML comprenant deux boites, l'un contient un menu, l'autre contient le contenu.
Pour charger le contenu  dans la boite appropriée, je le charge avec la fonction load() en attribuant une classe aux liens du menu comme ceci :

$('.load').click(function() {
		var href = $(this).attr('href');
		$('#contenu').load(href);
		return false;
	});

Jusque là, rien d'extraordinaire, ça charge bien, c'est pratique toussa toussa.

Maintenant, j'ai un contenu qui comporte des onglets que j'ai mis en place facilement avec la fonction tabs() du jQuery-UI.
J'aimerais donc mettre dans mon menu des liens direct vers chaque onglets, histoire de pas se prendre la tête quand on est pas dans la bonne section et qu'on besoin d'accéder à un onglet précis.
Mon idée était de choper l'url et d'analyser quelle ancre on veut charger pour pouvoir préciser à la fonction tabs() quel onglet est actif avec un code comme celui-ci :

var param = document.location.href.split('#')[1];
	$('#messagerie').tabs({
		active: param
	});

(merci à waloo sur le canal irc ##html-fr pour son aide d'ailleurs)
Seulement voilà, j'ai complètement zapper le fait que l'url ne se met pas à jour étant donné que le lien est annulé avec un "return false;" histoire d'éviter de charger la page complète. Donc ce qui me reste comme URL c'est :

http://www.monsite.com/

au lieu de :

http://www.monsite.com/mapage.html#monAncre

Et à mon avis, c'est plutôt normal, sinon il chargerai mapage.html et non l'index.html qui la page centrale.
En php, ce serait vite réglé mais j'aimerais faire en sorte que cela reste en html.
Ma question est donc, comment puis-je faire en sorte que quand j'appel l'adresse :

http://www.monsite.com/mapage.html#monAncre

Ça s'affiche directement dans la boite de contenu et que ça ne charge pas seulement "mapage.html"
Je pensais à l'url rewriting, mais ça implique du php, enfin si j'ai bien compris.
Voilà, merci d'avance pour ceux et celles qui pourront m'aider

Morgiver

Dernière modification par Morgiver (Le 12/03/2013, à 12:54)

---

http://www.morgiver.net/

Morgiver

Re : [RESOLU] Problème avec la fonction load() et les ancre

Ayé j'ai réussi
Méthode un peu bizarre, mais pourquoi pas.

J'ai créer une globale, que je modifie en fonction du lien. Cette globale représente l'ancre ou le numéro de l'onglet à afficher.
Dans le js du fichier chargé avec la fonction load(), je reprend l'ancre et l'assigne à la propriété active de la fonction tabs().

Les liens dans le menu :

<li><a href="mapage.html" title="1" class="load">Mon lien</a></li>
<li><a href="mapage.html" title="2" class="load">Mon deuxième lien</a></li>

Mon fichier JS qui gère les chargement de page :

var ancre;

function setAncre(data)
{
	ancre = data;
}

$(function() {
	$('#menu').menu();
	$('.load').click(function(event) {
		var href = $(this).attr('href');
		setAncre($(this).attr('title'));
		$('#corps').load(href);
		event.preventDefault();
	});
});

La page html à charger via la fonction load() :

<script  src="monfichier.js"></script>
<div id="boiteOnglets">
    <ul>
        <li><a href="#monOnglet">Mon Onglet</a></li>
        <li><a href="#monOngletDeux">Mon Deuxième Onglet</a></li>
    </ul>
    <div id="monOnglet">
    Mon onglet 1
    </div>
    <div id="monOngletDeux">
    Mon Onglet Deux
    </div>
</div>

Le fichier JS qui gère les onglet :

$(function() {
	$('#boiteOnglets').tabs({
		active: ancre
	});
});

Et voilà, bon j'imagine qu'il doit y avoir d'autre méthodes, mais c'est celle que j'ai trouver en attendant d'en trouver une autre plus simple.

Dernière modification par Morgiver (Le 12/03/2013, à 13:23)

---

http://www.morgiver.net/