Outils pour utilisateurs

Outils du site


cours2007:poo1:tp:slider

Slider

Faire un effet semblable à Coda-Slider

Suivre la démarche indiquée en TD : Effets HTML/CSS/JavaScript

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) :

Tester les variations

Ajouter une marge gauche négative pour faire apparaître d'autres écrans. Tester différentes valeurs.

Remarque le plus simple est d'utiliser FireBug :

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

Le but est de désactiver la mise en forme du slider quand il n'y a pas de code JavaScript.

Ajouter le code JavaScript suivant :

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

Code JavaScript

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 contenu dans celle d'id silder (voir TD).

Quoi / Comment changer

la marge gauche de la division contenu (en modifiant le style correspondant) (voir TD)

Création d'effets

Faire un effet changeant la marge gauche : Fx.Style (voir TD)

Gérer les événements

Chaque élément “cliquables” déclenchera un événement demandant un changement de la marge par le biais de l'effet mis en place.

Généraliser le code

Simplifier le code en réalisant une fonction qui évite les réplications de code des gestionnaires d'événement ex : changeSlide('idBouton',3);

Allez plus loin

  • Faire des boutons précédents suivants
  • Calculer les styles :
    • On donne juste : #slider {width:300px;height:200px;}
    • Le reste est calculé
  • Demander d'autre problème…
  • Ou dire ce que vous désirez réaliser comme effet.
cours2007/poo1/tp/slider.txt · Dernière modification: 2008/08/30 22:00 (modification externe)