Outils pour utilisateurs

Outils du site


cours2011:bases_de_la_programmation_orientee_objets_et_evenementielle:slider_-_classique

Slider - classique

Objectif : faire un effet semblable à Coda-Slider

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.9.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 ”slider” 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 ”$(this)” : sur qui l'utilisateur à cliqué.

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($(this).attr("href")) est regardé dans la console.
  • On doit obtenir l'ancre qui est exactement le sélecteur CSS pour obtenir le slide à afficher : ”$(…)
    • Toujours utiliser ”console.log(…)” pour visualiser le résultat du code testé :

  • Maintenant on veut trouvez sa position.
  • On peut trouver le conteneur à déplacer par sa classe CSS en écrivant le bon sélecteur.
  • Il ne reste plus qu'à l'animer…

Boutons précédant / suivant

Ajouter au code HTML des boutons :

  <nav>
    <p id="avant">Avant</p>
    <ul id="navigation">
      <li><a href="#slide1" accesskey="1">1</a></li>
      ...
    </ul>
    <p id="apres">Après</p>
  </nav>

Pour les gérer par JavaScript :

  $('#avant').click(function (){
    if (!courant.is(':first-child')) {
      var slide = courant.prev();
      // ici la suite ...
    }
  });

Il y'a besoin d'utiliser une variable pour mémoriser l'élément courant.

Au début de votre code :

jQuery(function ($) {
    "use strict";
 
    // Variable réferençant l'élément du slide "courant"
    // Initialisé avec le premier "slide"
    var courant = $('#slider .slide:first-child');
 
    …….
 
});

Et dans le gestionnaire d'événement (click sur les liens), mettre à jour la variable courant en fonction du slide que l'on affiche.

Temporisation

On va utiliser la fonction setInterval pour faire une action à intervalle régulier et clearInterval pour l'arrêter.

Ajouter le code suivant :

  function suivant(){
    console.log("ici le code passant au suivant");
  }
 
  var timer = setInterval(suivant,2000);

Testez : Vous devez voir le message s'afficher à intervalle régulier dans la console.

Remplacer le ”console.log” par le code permettant de passer au suivant.

Testez

Faire boucler le “slider” en ajoutant une clause ”else” au test traitant le cas du dernier élément. Dans ce cas, on utilisera le premier slide (écrire un sélecteur le trouvant).

Testez

Pour finir, on va interrompre le “timer” si l'utilisateur utilise les boutons (avant, après ou liens vers un slide).

On peut réaliser cela en ajoutant l'instruction : ”clearInterval(timer);” ou nécessaire.

Tester

cours2011/bases_de_la_programmation_orientee_objets_et_evenementielle/slider_-_classique.txt · Dernière modification: 2013/05/13 11:48 (modification externe)