Outils pour utilisateurs

Outils du site


cours2011:jquery_semestre_4:tp:slider

Slider

Objectif : faire un effet semblable à Coda-Slider

Le code JavaScript réalisant l'effet (jQuery 1.7) :

jQuery(function ($) {
	$('#slider').addClass("slider");	
	$('#navigation').on("click","a",function(event) {
		event.preventDefault();
		var slide = $($(event.target).attr("href")).closest('.slide'); 
		slide.closest('.contenu').animate({left:-slide.position().left},{duration:1500,queue:false});
	});
})

Le code présenté n'est pas très lisible, car je l'ai volontairement condensé (pas de variable intermédiaire). Inutile de chercher à le comprendre. C'est juste pour vous montrez que vous pouvez perdre votre temps à chercher un plug-in qui réalise l'effet que vous désirez alors que vous pouvez le faire vous-même en quelque ligne.

Ce TP va vous guider dans cette réalisation.

  • Le code HTML/CSS : paradoxalement le plus important, car c'est la qu'est fait l'essentiel du travail.
  • Le code JavaScript : qui se contente de modifier les CSS pour réaliser l'interactivité et l'animation.

Construire HTML et CSS

Technique de base

Principe

Le schéma suivant explique le principe :

Code HTML

Le code HTML (sauf contenu des écrans) :

Le rendu sans style :

Code CSS

Remarque : préfixer tous les sélecteurs par #slider, vous verrez plus loin pourquoi.

Limiter la taille des écrans :

Mettre les écrans en float pour pouvoir les placer sur une ligne :

Fixer la taille du conteneur pour assurer que les écrans soit sur une seule ligne :

Utiliser la division de slider (#slider) comme masque (limiter sa taille et masquer ce qui dépasse) :

Changer la position

On va faire bouger ”.contenu” dans ”#slider” :

  • #slider” sera en position relative

  • .contenu” sera en position absolute

  • On peut alors déplacer ”.contenu” par la propriété left

Remarque le plus simple est d'utiliser FireBug :

Code JavaScript

Mise en place

Dans les en-têtes de la page HTML : charger jQuery et votre code (le fichier ”slider.js”) :

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="slider.js"></script>

Dans le fichier ”slider.js”, le code “minimum” pour jQuery :

Dégradation

Aspect sans CSS

Sans problème, faire un test en désactivant les styles.

Aspect sans JavaScript

Il faut désactiver les styles mis en place pour #slider les remplacer par .slider :

  • Dans les styles remplacer ”#slider” par ”.slider

Le but est de désactiver la mise en forme du slider quand il n'y a pas de code JavaScript. Après la modification des CSS, les styles nécessaires au “slider” ne sont plus actifs. On va les remettre en place par le biais de JavaScript.

Ne pas ajouter la classe ”spider” dans le code HTML. C'est le code JavaScript qui “va” le faire.

Ajouter le code JavaScript suivant :

Tester avec et sans JavaScript (Préférence / Contenu / Activer JavaScript)

Code JavaScript pour l'animation

Ajouter dans un premier temps des éléments “cliquables” qui serviront à afficher l'un ou l'autre des écrans.

  <ul>
    <li><span id="p1">1</span></li>
    <li><span id="p2">2</span></li>
    <li>...
  </ul>

Qui modifier

La division de classe contenue dans celle d'id slider :

  • Tester dans le code suivant dans la console :

Remarque : ”jQuery” et ”$” sont la même fonction (dans votre code). Ici on utilise jQuery car ”$” a pu être modifié.

Quoi / Comment changer

la propriété ”left” de la division contenue :

  • Tester dans le code suivant dans la console :

C'est l'équivalent en code JavaScript de la manipulation avec Firebug des propriétés CSS.

Création d'effets

Faire la même chose de façon animée : c'est un jeu d'enfant.

Important : retenez combien il est simple de tester du code dans la console !

Gérer les événements

Chaque élément “cliquables” déclenchera un événement demandant un changement de la position.

Combiner ce code avec celui de l'animation…

Généraliser le code

Mettre en place les gestionnaires d'événements pour tous.

Vous devez avoir un code très répétitif. Vous pouvez éliminer les répétitions en utilisant une boucle et/ou une fonction. Le faire si vous voyer comment. Sinon passer à la suite pour une solution plus élégante.

La délégation d'événement

Deux changements à faire :

  • le code HTML pour utiliser des liens.
  • le code JavaScript pour n'utiliser qu'un écouteur d'événement.

Liens comme actions

Modifier le code HTML comme suit :

Maintenant si vous désactivez JavaScript, vous avez des ancres pour naviguer dans la page (le tester).

Délégation d'événements

Utiliser un seul gestionnaire d'événement :

Tester le code :

Explication :

  • On écoute ”#navigation” pour des click
  • Mais on ne s'intéresse qu'aux éléments ”A” qu'il contient.
  • event.preventDefault();” fait que le comportement par défaut (suivre le lien, allez à l'ancre) n'est pas réalisé :
    • En JavaScript on va faire l'animation.
  • On sait tous ce qu'il faut par le biais de ”event.target” : sur qui l'utilisateur à cliqué.
    • Avec jQuery on peut aussi utiliser ”$(this)”, mais c'est une autre histoire.

Démarche pour faire un code généralisé

Suivre les étapes et les combiner avec “console.log(…)” pour visualiser leurs réussites.

  • Avec la méthode attr on peut lire l'attribut ”href” pour savoir quel “slide” afficher.
    • Pour celui-ci je vous aide : console.log(cible.attr(“href”)) est regardé dans la console.
  • On doit obtenir l'ancre qui est exactement le sélecteur CSS pour obtenir l'élément ”A” du slide à afficher : ”$(…)
    • Toujours utiliser ”console.log(…)” pour visualiser le résultat du code testé :

  • Mais on veut le parent (de l'élément ”A”) de classe CSSslide”, ce que la méthode closest fait si on lui donne le bon sélecteur.

  • Maintenant on veut trouvez sa position.
  • On peut trouver le conteneur à déplacer de différente façon :
    • Par sa classe CSS en écrivant le bon sélecteur.
    • Ou toujours avec sas classe CSS mais en utilisant de nouveau closest
  • Il ne reste plus qu'à l'animer…

Plus loin : Les fonction d'easing

jQuery ne les possède pas par défaut, elles sont dans “jQuery UI”.

Vous pouvez utiliser : http://gsgd.co.uk/sandbox/jquery/easing/

Inutile d'ajouter le fichier JavaScript en entier. Vous pouvez ne garder que celles qui vous intéressent. Ajouter à la fin de votre fichier :

jQuery.extend( jQuery.easing,
{
	def: 'easeOutQuad',
	easeInCubic: function (x, t, b, c, d) {
		return c*(t/=d)*t*t + b;
	},
	easeOutCubic: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t + 1) + b;
	},
	easeInOutCubic: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t + b;
		return c/2*((t-=2)*t*t + 2) + b;
	}
});

maintenant vous pouvez animer avec une fonction d'easing :

Plus loin : Cross-Fading

Attention, le code qui suit n'est pas à utiliser avec les questions précédentes !!!

Changer la CSS en :

Changer l'opacité pour modifier l'écran afficher.

On peut utiliser les méthodes :

cours2011/jquery_semestre_4/tp/slider.txt · Dernière modification: 2012/02/09 23:00 (modification externe)