Salut

Travaillant pour quelques commerçant en leur faisant leur site web pour gagner un peu d'argent, j'ai besoin de faire une espèce de table avec des onglets en haut pour naviguer entre les différentes catégorie, mais je ne sais pas comment ça s'appelle.
Pour que vous compreniez bien ce que mon client veut exactement, allez ici.

En gros vous voyez qu'il y a plusieurs onglets, mais surtout mon client m'a dit qu'il aurait été préférable que la page ne se recharge pas entièrement quand on passe d'un onglet à l'autre, mais juste la table qui se recharge, comme on peut voir sur la site cité plus haut.

Donc voilà mes questions :
- Déjà je ne sais pas du tout quel langage utiliser, vais-je devoir le faire en avec du css, php ou javascript ?
- Ensuite, si je dois le faire en php ou javascript, étant donné que je n'en ai fait que très peu, existe-il des scripts tout prêt ? Je n'ai vraiment pas le temps d'apprendre un de ces langages, ça prendrait trop de temps pour le client (et le client est roi, bien entendu )
- Une idée pour éviter le refresh de la page entière au lieu de juste la table ?


Merci beaucoup, bonne soirée

Bonjour,

Tu peux faire un menu de navigation en XHTML/CSS.

Sur le site que tu donnes en exemple, il y a bien un chargement complet de la nouvelle page quand on clique sur un onglet.
On peut avoir l'impression du contraire car l'aspect du haut de la page est identique sur toutes les pages.

Si tu ne veux pas rafraîchir toute la page, il faut te tourner vers l'Ajax, mais tu sembles débuter et ça risque de ne pas être évident.
Et puis il faut voir si ça vaut vraiment la peine de ne pas rafraîchir la page, tout dépend du contenu.

Bonne soirée.

Heu non ellm, je pense que tu ne dois pas parler des mêmes onglets mais la page ne se recharge absolument pas. Et oui il faut faire ça en ajax si tu veux le même résultat.

Moi je parlais des onglets : Nos formations - Nous connaître - Pour votre entreprise - Pour vous former.

Ce n'est pas de ceux là dont parlait gap-en-force ?


Je viens de voir qu'il y a d'autres onglets plus bas (Pour qui, objectifs, etc..)
Dans ce cas là, même pas besoin d'Ajax, un simple javascript suffit à faire apparaitre la bonne description en dessous.
Par défaut toutes les descriptions sont sur la page, mais certaines sont masquées. Le javascript permet juste d'afficher la bonne description et masquer les autres.

Bonjour,

Je te conseille de t'orienter vers les API de google ou les YUI (yahoo user interface) pour développer ce genre de script.

Tu as également DomTab qui te permet de générer un systeme d'onglet dynamique :
domtab

Citation : ellm

Moi je parlais des onglets : Nos formations - Nous connaître - Pour votre entreprise - Pour vous former.

Ce n'est pas de ceux là dont parlait gap-en-force ?


Je viens de voir qu'il y a d'autres onglets plus bas (Pour qui, objectifs, etc..)
Dans ce cas là, même pas besoin d'Ajax, un simple javascript suffit à faire apparaitre la bonne description en dessous.
Par défaut toutes les descriptions sont sur la page, mais certaines sont masquées. Le javascript permet juste d'afficher la bonne description et masquer les autres.

Je parlais en effet des onglets Pour Qui, objectifs ...
Sinon j'ai pas trop compris c'que tu voudrais faire en javascript, tu pourrais développer un peu ?
Et me dire ce que je devrais apprendre si besoin

Merci Guiz, je vais voir c'que j'peux faire

Pas besoin d'ajax, il y a plus simple avec un bête JS...

Tu crées une div par onglet, et tu les masques (display: none;). Tu crées une liste (display: inline; style que tu appliques via le JS pour être sûr que ceux qui ont le JS désactivé voient quand même les infos) ça sera tes onglets. Après lors du clic tu changes le contenu de la div où tu affiches les informations (document.getElementById('taDiv').innerHTML). Tu n'auras pas le choix d'apprendre les rudiments du JS...

En même temps quelle idée de vouloir vendre des sites quand on maîtrise pas de langage dynamique -et qu'on ne sait même pas à quoi il servent-...

C'est un projet professionnel pour un proche, mais sérieux quand même.

Donc j'essaye de faire du mieux que je peux, vu que je le connait bien

Le problème c'est que j'ai pas vraiment le temps d'apprendre ... j'le ferais t'façon


Sinon pour ce que tu propose en gros c'est un menu horizontal, et le contenu de chaque div (chaque élement de la liste donc si j'ai bien compris) change avec ta formule dites plus haut.

J'essayerais, si j'y arrive pas, je pourrais te mp ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="fr-FR" />
		
		<title>Onglet &amp; JS</title>
		
		<meta http-equiv="imagetoolbar" content="no" />
		
		<style type="text/css">
		ul#navigation li
		{
			display: inline;
		}
		</style>
		
		<script type="text/javascript">
		<!--//
			function switchContent(href)
			{
				var anchor = href.substring(href.lastIndexOf('#') + 1);
				
				document.getElementById('box').innerHTML = document.getElementById(anchor).innerHTML;
				
				return false;
			}
		//-->	
		</script>		
</head>
	
<body>
	<ul id="navigation">
		<li><a href="#ongletA" onclick="switchContent(this.href);">Onglet A</a></li>
		<li><a href="#ongletB" onclick="switchContent(this.href);">Onglet B</a></li>
		<li><a href="#ongletC" onclick="switchContent(this.href);">Onglet C</a></li>
		<li><a href="#ongletD" onclick="switchContent(this.href);">Onglet D</a></li>
	</ul>
	
	<div id="box">Ton texte par défaut ;)</div>
	
	<div id="tab">
		<div id="ongletA">Contenu de l'onglet A</div>
		<div id="ongletB">Contenu de l'onglet B</div>
		<div id="ongletC">Contenu de l'onglet C</div>
		<div id="ongletD">Contenu de l'onglet D</div>
	</div>
	
	<script type="text/javascript">
	<!--//
		document.getElementById('tab').style.display = 'none';
	//-->
	</script>
	
	</body>
</html>

J'ai fait ça vite fait, ça à l'air de marcher de plutôt bien marcher... Après il y a moyen d'apporter des tonnnes et des tonnes d'améliorations au script mais comme tu ne connais pas le JS c'est pas la peine de t'embrouiller

Edit : c'est super basique, mais la base est là le reste c'est du CSS Cie.

Oh merci c'est gentil

J'ai peu près compris ce que je dois modifier, juste :

Quant tu mets des href, soit en paramètres de fonction, soit en autre chose, je dois le modifier ? Par quoi ?
A ces endroits-ci :

function switchContent(href)

var anchor = <href.substring(href.lastIndexOf('#') + 1);

<a href="#ongletA" onclick="switchContent(this.href);">

Merci beaucoup ça à l'air pas mal avec du CSS, je verrais ça quand j'aurais un peu plus de temps

J'espère que j'aurai pas d'autres problèmes

En fait c'est très simple à utiliser

Tu n'a rien ou presque à modifier, par exemple si tu veux rajouter un onglet, tu crées une div et tu l'appelles comme tu veux, "toto" par exemple, et tu rajoutes un lien dans la liste comme ça :

<li><a href="#toto" onclick="switchContent(this.href);">Onglet Toto</a></li>

En fait je passe le href en paramètre à la fonction switchContent, qui enlève le dièse (#) puis change "automatiquement" le contenu de #box sans toucher à #Toto...

J'espère que c'est clair si ça ne l'est pas n'hésite pas à me demander des précisions

Pour l'instant c'est clair, j'ai pas grand chose à modifier tu m'a mâcher tout le travail

Mais bon pour l'instant ...

Avec du CSS ça a rendu un truc pas mal

Par contre j'ai quelques questions, si tu veux bien

- J'aimerais bien modifie l'apparence quand un onglet est actif, quand on est sur le texte de cet onglet ; pour savoir sur lequel on est. Comment je pourrais faire ça ? Il n'y aura pas quelque chose qui dit si un onglet est actif ou non ?

- pour le texte par défaut, j'aurais préféré plutôt ouvrir directement le premier onglet de la liste. Comment puis-je faire ça ?


Merci

Up

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="fr-FR" />
		
		<title>Onglet &amp; JS</title>
		
		<meta http-equiv="imagetoolbar" content="no" />
		
		<style type="text/css">
		*
		{
			outline: none;
		}
		
		ul#navigation li
		{
			display: inline;
		}
		
		#active /*id qui te sers à déterminer l'onglet 'actif'*/
		{
			background-color: red;
		}
		</style>
		
		<script type="text/javascript">
		<!--//
			function switchContent(obj)
			{
				var anchor = obj.href.substring(obj.href.lastIndexOf('#') + 1);
				
				document.getElementById('box').innerHTML = document.getElementById(anchor).innerHTML;
				document.getElementById('active').removeAttribute('id');
				obj.setAttribute('id', 'active');
				
				return false;
			}
		//-->	
		</script>		
</head>
	
<body>
	<ul id="navigation">
		<li><a href="#ongletA" onclick="switchContent(this);">Onglet A</a></li>
		<li><a href="#ongletB" onclick="switchContent(this);">Onglet B</a></li>
		<li><a href="#ongletC" onclick="switchContent(this);">Onglet C</a></li>
		<li><a href="#ongletD" onclick="switchContent(this);">Onglet D</a></li>
	</ul>
	
	<div id="box">Ton texte par défaut ;)</div>
	
	<div id="tab">
		<div id="ongletA">Contenu de l'onglet A</div>
		<div id="ongletB">Contenu de l'onglet B</div>
		<div id="ongletC">Contenu de l'onglet C</div>
		<div id="ongletD">Contenu de l'onglet D</div>
	</div>
	
	<script type="text/javascript">
	<!--//
		document.getElementById('tab').style.display = 'none';
		document.getElementById('box').innerHTML = document.getElementById('tab').getElementsByTagName('div')[0].innerHTML;
		document.getElementById('navigation').getElementsByTagName('li')[0].setAttribute('id', 'active');
	//-->
	</script>
	
	</body>
</html>

Bonjour,

Je ferme ce sujet pour debug (bloqué en haut du forum). En cas de désaccord, me contacter par MP.