[Résolu] Hashtag dans URL pour navigation via des onglets

Bonjour,

Je suis néophyte en Javascript et j'utilise la source suivante pour la navigation d'un projet sur lequel je travaille actuellement :

http://mehdi.biz/blog/2010/02/05/vertical-tabs-for-jquery-lovers/

Le menu avec onglets vertical fonctionne parfaitement, toutefois j'aurai aimé savoir si quelqu'un saurait comment implémenter la possibilité de pointer sur tel ou tel onglet directement via un hashtag passé dans mon url ?

Mon code actuel est le suivant :

<script type="text/javascript" language="javascript" >
	$(function() {
		var $items = $('.vtab>ul>li');
		$items.mouseover(function() {
			$items.removeClass('selected');
			$(this).addClass('selected');

			var index = $items.index($(this));
			$('.vtab>div').hide().eq(index).show();
		}).eq(0).mouseover();
	});
</script>

<div class="vtab">
	<ul>
		<li class="home" title="Accueil"></li>
		<li class="terminaux" title="Gestion des Terminaux"></li>
		<li class="contacts" title="Gestion des Contacts"></li>
		<li class="constructeurs" title="Gestion des Constructeurs"></li>
	</ul>
	<div>
		<h4>Accueil</h4>
		Contenu onglet 1
	</div>
	<div>
		<h4>Terminaux</h4>
		Contenu onglet 2
	</div>
	<div>
		<h4>Contacts</h4>
		Contenu onglet 3
	</div>
	<div>
		<h4>Constructeurs</h4>
		Contenu onglet 4
	</div>
</div>

Je suppose que pour commencer je dois donner un id a chacun des div générant les onglets afin de les différencier et de pointer dessus. Pour le reste je sèche.

Cdt


Nicolas
Modifié par Klesk (04 Sep 2012 - 15:51)

J'ai fait un test (avec des onglets horizontaux) jadis… Je ne suis pas dev il y a sûrement des améliorations à apporter au niveau du code.
Modifié par Patidou (28 Aug 2012 - 16:11)

À noter la classe "no-js" sur l'élément html elle est remplacée (grâce au script modernizr) par "js". Cette page se dégrade visuellement si javascript est désactivé mais reste fonctionnelle.

J'ai utilisé la fonction .eq() de Jquery pour sélectionner un div en particulier que j'ai renseignée en dur dans le code pour valider ma syntaxe :

			$(function() {
				var $items = $('.vtab>ul>li');
				$items.click(function() {
					$items.removeClass('selected');
					$(this).addClass('selected');
					window.location.hash = $('.vtab>div').eq(2).attr('id');					
					
					var index = $items.index($(this));
					$('.vtab>div').hide().eq(index).show();
				}).eq(0).click();
								
			});

Mes onglets ayant pour numéros 0,1,2,3, le fait de dire .eq(2) me sélectionne l'id de la div du 3eme onglet.

Reste à trouver comment remplacer cette valeur en dur par le code permettant d'indiquer qu'on prend la valeur de l'onglet cliqué et non systématiquement la valeur de l'onglet 3. J'avance petit à petit.
Modifié par Klesk (30 Aug 2012 - 18:55)

Bonjour tm,

Merci pour ta réponse, ça fonctionne bien avec "this", j'ai juste remplacé class par id. Il me change bien mes hashtag a chaque changement d'onglet, maintenant comment faire pour que lorsqu'on renseigne une url avec un hastag, on soit positionné directement sur l'onglet correspondant ?

Actuellement si je lui donne une url avec, il me renvoi sur la page d'accueil qui est l'onglet sélectionné par défaut.

Dans l'exemple que je t'ai donné, avant que la page soit affiché (window load), il y a un script qui se lance et qui ajoute une class selected sur le tab à afficher (récupération du hashtag), les autres étant cachés (mais pas masqués) via les css (si js est activé).
Modifié par Patidou (04 Sep 2012 - 10:48)

Dans mon code actuel, le système vtab ajoute également une class selected au <li> correspondant à l'onglet cliqué ou à l'onglet défini par défaut lorsqu'on charge la page.

Ce que je cherche à faire c'est à tester en quelque sorte l'url, voir si on a déjà un hashtag dedans et si oui mettre mon selected sur le bon <li>.

Je ne sais pas comment faire hélas .

Voici mon code actuel :

$(function() {
	var $items = $('.vtab>ul>li');
	$items.click(function() {
		$items.removeClass('selected');
		$(this).addClass('selected');
		window.location.hash = $(this).attr('id');			
		
		var index = $items.index($(this));
		$('.vtab>div').hide().eq(index).show();
	}).eq(0).click();
					
});

Donc en gros il faut que je lui dise de tester l'url au chargement. Si on a un hashtag on met un selected sur le <li> dont l'id correspond au hashtag sinon on fait un .eq(0).click(); pour charger l'onglet 0 qui est celui de l'accueil.

EDIT : Peut-être faire une fonction séparée chargée via onLoad sur la balise body ?
Modifié par Klesk (04 Sep 2012 - 12:33)

Klesk a écrit :


EDIT : Peut-être faire une fonction séparée chargée via onLoad sur la balise body ?

Tu as été voir le code de la page que j'ai mis en exemple?

Même si le code n'est bien factorisé, ça fonctionne. Faut juste changer les css pour la présentation en vertical.
Modifié par Patidou (04 Sep 2012 - 14:38)

Un autre test mais sans gestion des hashs, juste le mouseover. Encore une fois, code pas optimisé mais ça fonctionne.

Ton code modifié :

var $items = $('.vtab > ul > li');
var hash = (window.location.hash) ? window.location.hash.replace('#','.') : '.home';

$items.click(function() {
    $items.removeClass('selected');
    $(this).addClass('selected');
    window.location.hash = $(this).attr('class').replace(' selected','');            
    
    var index = $items.index($(this));
    $('.vtab > div').hide().eq(index).show();
}).filter(hash).trigger('click');

Récupération du hash de l'url ('home' par défaut).
Déclenchement du click du 'li' correspondant...

tm

@Patidou : Je suis allé voir oui, mais j'essaie de faire mon script à partir de ma base actuelle de façon à maitriser et comprendre ce que je fais.

@tm : Ca ne fonctionne pas hélas . Voici mon code actuel (quelques modifs depuis celui du départ) :

<div class="vtab">
	<ul><!-- debut Onglet verticaux -->
		<li class="home" title="Accueil"></li>
		<li class="terminaux" title="Gestion des Terminaux"></li>
		<li class="contacts" title="Gestion des Contacts"></li>
		<li class="constructeurs" title="Gestion des Constructeurs"></li>
	</ul><!-- fin Onglet verticaux -->
	<div id="accueil"><!-- debut Contenu 1er Onglet vertical -->
		
		<!--Contenu onglet 1-->
		
	</div><!-- fin Contenu 1er Onglet vertical -->
	<div id="terminaux"><!-- debut Contenu 2eme Onglet vertical -->

		<!--Contenu onglet 2-->

	</div><!-- fin Contenu 2eme Onglet vertical -->
	<div id="contacts"><!-- debut Contenu 3eme Onglet vertical -->

		<!--Contenu onglet 3-->

	</div><!-- fin Contenu 3eme Onglet vertical -->
	<div id="constructeurs"><!-- debut Contenu 4eme Onglet vertical -->

		<!--Contenu onglet 4-->

	</div><!-- fin Contenu 4eme Onglet vertical -->
</div>

<script type="text/javascript" language="javascript" >
	$(function() {
		var $items = $('.vtab>ul>li');
		$items.click(function() {
			$items.removeClass('selected');
			$(this).addClass('selected');
			window.location.hash = $(this).attr('class').replace(' selected','');			
			
			var index = $items.index($(this));
			$('.vtab>div').hide().eq(index).show();
		}).eq(0).click();
						
	});
</script>

Modifié par Klesk (04 Sep 2012 - 15:15)

Re,

Chez moi, ça fonctionne : hash.html
A noter que j'ai modifié le html et mis un id identique à la class (home plutôt que accueil).

tm

Autant pour moi ça fonctionne bien en effet . je vais analyser ton code pour voir en détail la syntaxe utilisée. Merci beaucoup tm et Patidou.

EDIT : Dernier détail, j'ai vu au hasard de mes recherches une fonction JS qui permet d'annuler le fait que la fenêtre se positionne sur l'id, mais j'ai oublié de la noter :S. Si ça vous parle je suis preneur.

EDIT 2 : Apriori c'est preventDefault() mais je ne vois pas comment ça marche, hop google
Modifié par Klesk (04 Sep 2012 - 15:56)