11495 sujets

JavaScript, DOM et API Web HTML5

Recherche exemple de galerie avec tabs verticaux

Bonjour,

Déjà, pleurer au bout de trois heures c'est un peu rapide. Smiley cligne

Ensuite, ce genre de chose très simple ne demande pas l'utilisation d'un plugin complet, on programme ça soi-même en cinq ou six lignes de code (en utilisant jQuery, pourquoi pas).

Bien sûr, ça demande d'avoir des connaissances de base en JavaScript, et de connaitre un minimum la bibliothèque de fonctions que l'on veut utiliser (jQuery dans le cas présent). Mais c'est un pré-requis pour l'utilisation de n'importe quel bibliothèque ou plugin, à mon avis. Smiley smile
si je demande un exemple c'est que ta condition n'est pas remplie Smiley rolleyes Smiley confus Smiley ohwell

merci quand même je vais continuer de chercher Smiley confus
Modifié par zbibounette (16 Mar 2009 - 15:30)
zbibounette a écrit :
si je demande un exemple c'est que ta condition n'est pas remplie

D'où mon message subliminal: des fois il faut se former pour faire les choses.

J'ai fait une recherche rapide de plugin pour des onglets verticaux avec jQuery. La référence que l'on trouve toujours, c'est le plugin Tabs de jQuery UI (http://jqueryui.com/ ), qui ne propose pas de mode vertical. Il y a une feature request à ce sujet:
http://dev.jqueryui.com/ticket/4193 (avec un exemple fonctionnel donné en lien)

Je suppose que cet exemple pourrait être reproduit, mais à priori pas par un débutant. (Quant aux non-débutants, ils écriront sans doute leur propre script de quelques lignes, comme je le précisais.)
Un petit code en vitesse, il y a des améliorations à faire côté css mais bon :

<!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">
<head>
<title>Tab horizontales</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css" media="screen">
		body {
			font-size: 90%;
			font-family: arial, helvetica, sans-serif;
		}
		h1 {text-align: center; color: #f00;}
		#articles {width: 400px; position: relative; border:  #000 5px solid;}
		#articles h3, #articles h3 a {color: #900;}
		.hasJS #articles div div.montre {position: absolute; top: 0; right: 0;  border:  #f00 1px solid; left: 100px}
		.hasJS #articles div div {position: absolute; top: -5000px; left: -5000px;}
	</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
	//<![CDATA[
		$("html").addClass("hasJS");
		$(document).ready( function () {
			// gestion des hover sur les h3 :
			$("div.article h3").hover( 
				function () {
					$("#articles div.montre").removeClass("montre");
					$(this).next("div").addClass("montre");
				},
				function () {
					//$(this).next("div").removeClass("montre");
				}
			);
		} ) ;

	//]]>
</script>

</head>

<body>
	<h1>Tab horizontales</h1>
	<p>Inspiré par <a href="http://css.alsacreations.com/Tutoriels-JavaScript/Creer-un-menu-accordeon-avec-jQuery">le menu accordéon sur le site d'alsacréations</a> (une partie du code est repris)…</p>
	<h2>Une série de h3 en tab horzontales</h2>
	<div id="articles">
			<div class="article">
				<h3>Premier</h3>
				<div class="montre">
					<p>Contenu après le premier h3.</p>
				</div>
			</div>
			<div class="article">
				<h3>Deuxième</h3>
				<div>
					<p>Contenu après le deuxième h3.</p>
	
				</div>
			</div>
			<div class="article">
				<h3>Troisième</h3>
				<div>
					<p>Contenu après le troisième h3.</p>
				</div>
			</div>
	</div>

	
</body>
</html>

Modifié par Patidou (16 Mar 2009 - 17:39)
Patidou, deux remarques rapides:

1. La section CDATA, c'est utile uniquement si tu souhaites pouvoir servir ta page en application/xhtml+xml. Autrement c'est superflu. (Bon, dans cette optique il serait plus logique de faire du HTML 4 plutôt que du XHTML 1.0, mais on y vient de toute manière.)

2. Le $("html").addClass("hasJS"); n'est pas optimal. Son rôle est d'éviter l'affichage de contenus à masquer (via JavaScript) lors du chargement des bibliothèques et scripts JS. Le faire dépendre du chargement de jQuery, c'est un peu limite. Il faudrait plutôt utiliser document.documentElement.className+="hasJS";, à placer dans le HEAD en dehors de tout $(document).ready() et avant de charger les bibliothèque et scripts JS (que tu peux charger en fin de document plutôt que dans le HEAD, d'ailleurs).
j'ai repris le code de patidou avec la doc de jquery c pas évident Smiley sweatdrop

j'essaye de faire apparaitre avec fadeIn les div "montre" et de faire défiler automatiquement les divs Smiley wingol

c'est dur dur , ça ne marche pas pour l'instant lol Smiley mur

Sur ce je vais continuer tte la nuit Smiley zzzz

Merci encore patidou ! Smiley confused
zbibounette a écrit :
j'ai repris le code de patidou avec la doc de jquery c pas évident Smiley sweatdrop

Bien. Smiley smile

zbibounette a écrit :
j'essaye de faire apparaitre avec fadeIn les div "montre" et de faire défiler automatiquement les divs Smiley wingol

Ah ben si tu veux des effets kikoolol en prime, c'est plus compliqué, forcément.
Voici le code corrigé avec en plus l'attribut langue et une largeur pour les h3 :

<!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="fr" lang="fr">
<head>
	<title>Tab horizontales</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<style type="text/css" media="screen">
		body {
			font-size: 90%;
			font-family: arial, helvetica, sans-serif;
		}

		h1 {text-align: center; color: #f00;}

		#articles {width: 400px; position: relative; border:  #000 5px solid;}

		#articles h3, #articles h3 a {color: #900; width: 100px}

		.hasJS #articles div div.montre {position: absolute; top: 0; right: 0;  border:  #f00 1px solid; left: 100px}

		.hasJS #articles div div {position: absolute; top: -5000px; left: -5000px;}

	</style>
	<script type="text/javascript">
		document.documentElement.className+=" hasJS";
	</script>
</head>
<body>
	<h1>Tab horizontales</h1>
	<p>Inspiré par <a href="http://css.alsacreations.com/Tutoriels-JavaScript/Creer-un-menu-accordeon-avec-jQuery">le menu accordéon sur le site d'alsacréations</a> (une partie du code est repris)…</p>
	<h2>Une série de h3 en tab horizontales</h2>
	<div id="articles">
		<div class="article">
			<h3>Premier</h3>
			<div class="montre">
				<p>Contenu après le premier h3.</p>
			</div>
		</div>
		<div class="article">
			<h3>Deuxième</h3>
			<div>
				<p>Contenu après le deuxième h3.</p>
			</div>
		</div>
		<div class="article">
			<h3>Troisième</h3>
			<div>
				<p>Contenu après le troisième h3.</p>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
			$(document).ready( function () {
				// gestion des hover sur les h3 :
				$("div.article h3").hover( 
					function () {
						//trucs à faire pendant le over sur les h3
						$("#articles div.montre").removeClass("montre");
						$(this).next("div").addClass("montre");
					},
					function () {
						//out : trucs à faire éventuellement quand le pointeur sort du h3
					}
				);
			});
	</script>
</body>
</html>
Tiens je viens de penser à un truc : cette solution est accessible aux lecteurs d'écran mais par contre les personnes qui naviguent au clavier... Je vais essayer d'améliorer le truc demain. Smiley smile
Modifié par Patidou (17 Mar 2009 - 00:20)
je susi arrivée à faire le fade in et fade out mais ça ne marche pas du premier coup -_-, par contre la lecture auto des div, je nai pas trouvé la fonction adéquate Smiley ohwell Smiley ohwell
Voici le script qui fonctionne également avec la navigation clavier :

	<script type="text/javascript">
			$(document).ready( function () {
				//tabindex pour la navigation au clavier
				$("#articles h3").attr("tabindex", "0");
				$("#articles h3").focus (
					function () {
						//trucs à faire pendant le focus sur les h3
						$("#articles div.montre").removeClass("montre");
						$(this).next("div").addClass("montre");
					}
				);
				// gestion des hover sur les h3 :
				$("div.article h3").hover( 
					function () {
						//trucs à faire pendant le over sur les h3
						$("#articles div.montre").removeClass("montre");
						$(this).next("div").addClass("montre");
					},
					function () {
						//out : trucs à faire éventuellement quand le pointeur sort du h3
					}
				);
			});
	</script>


Par contre j'aimerais regrouper les fonctions pour focus & hover, histoire que ça soit plus propre... Je regarde ça. Smiley smile
Ah tiens, moi les tabs je fais ça au clic, pas au survol. Le survol c'est quand même souvent casse-gueule/pas prévisible par l'utilisateur (tiens, si je vais là ça bouge? mais j'ai pas cliqué moi, je lui ai pas demandé de modifier les contenus affichés...).
Florent V. a écrit :
Ah tiens, moi les tabs je fais ça au clic, pas au survol.


D'accord avec toi, là j'ai juste essayé de reproduire le mécanisme du site donné dans le premier message (comme c'était ce qui intéressait zbibounette). Smiley cligne
comme je disais hier soir, le fade marche mais pas du premier coup, sauriez vous pourquoi ?

<!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="fr" lang="fr">

<head>

	<title>Tab horizontales</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



	<style type="text/css" media="screen">

		body {

			font-size: 90%;

			font-family: arial, helvetica, sans-serif;

		}



		h1 {text-align: center; color: #f00;}



		#big {width: 400px; position: relative; border:  #000 5px solid;}



		#big h3, #big h3 a {color: #900; width: 100px}



		.hasJS #big div div.montre {position: absolute; top: 0; right: 0;  border:  #f00 1px solid; left: 100px}



		.hasJS #big div div {position: absolute; top: -5000px; left: -5000px;}



	</style>

	<script type="text/javascript">

		document.documentElement.className+=" hasJS";

	</script>

</head>

<body>

	<h1>Tab horizontales</h1>

	<p>Inspiré par <a href="http://css.alsacreations.com/Tutoriels-JavaScript/Creer-un-menu-accordeon-avec-jQuery">le menu accordéon sur le site d'alsacréations</a> (une partie du code est repris)…</p>

	<h2>Une série de h3 en tab horizontales</h2>

	<div id="big">

		<div class="article">

			<h3>Premier</h3>

			<div class="montre">

				<p>Contenu après le premier h3.</p>

			</div>

		</div>

		<div class="article">

			<h3>Deuxième</h3>

			<div>

				<p>Contenu après le deuxième h3.</p>

			</div>

		</div>

		<div class="article">

			<h3>Troisième</h3>

			<div>

				<p>Contenu après le troisième h3.</p>

			</div>

		</div>

	</div>

	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

	<script type="text/javascript">

			$(document).ready( function () {

				// gestion des hover sur les h3 :

				$("div.article h3").hover( 

					function () {

						//trucs à faire pendant le over sur les h3
						$("#big div.montre").fadeOut(500);  
						$("#big div.montre").removeClass("montre");
						$(this).next("div").fadeIn(500);  
						$(this).next("div").addClass("montre");
						

					},

					function () {

						//out : trucs à faire éventuellement quand le pointeur sort du h3

					}

				);

			});
			
			
			
			
			

  </script>

			
			
			
			
			
			
			
			

	</script>

</body>

</html>


Par contre pour le défilement auto des divs je nai pas trouvé la focntion sur jquery Smiley confus

Merci encore Smiley lol
Je crois que le fadein pour fonctionner a besoin d'élément qui ont l'attribut style="display:none" au départ. C'est ce qui se passe avec le fadeout : à la fin un tel attribut est placé sur l'élément. Smiley cligne

C'est à toi de trouver comment faire tout ça en restant accessible. Smiley smile
Modifié par Patidou (17 Mar 2009 - 15:14)
Tu peux voir le fonctionnement avec l'extension firebug pour firefox. Tu verras les attributs ajoutés sur les éléments en fouillant le code html.
Modifié par Patidou (17 Mar 2009 - 15:43)
Sujet clos
Aller à