Fiche Javascript : Listes déroulantes

Objet de la fiche :

Etat de la fiche

Plan de la fiche

| Avant propos |
| Les possibilités |
| Comment intégrer |
| Créer une liste déroulante |
| Paramétrer la liste |
| Application au projet de site Web |

Avant propos :

On a très souvent besoin de présenter certaines informations ou news sous forme de listes déroulantes. Cela permet de donner un peu de "vie" à la page Internet et ainsi d'attirer l'attention des Internautes sur des points bien particuliers que vous désirez mettre en valeur.La conception d'une liste déroulante en JavaScript n'est pas toujours aisée. Cette fiche vous propose d'intégrer et de paramétrer très facilement un modèle de liste déroulante fluide et professionnelle.

Les possibilités

Voici des exemples obtenus à partir du modèle qui est proposé. Ces divers exemples et leurs modes de paramétrages seront détaillés ci-dessous.

Variante 1	Variante 2

Variante 3	Variante 4

Variante 5	Variante 6

variante 1 : défilement vertical manuel de 4 rubriques dans une zone de 200 pixels de largeur et 150 pixels de hauteur. Fond de zone de défilement avec image, bordure de cadre pointillé noir. Le défilement de la zone s'effectue en survolant les flèches haut et bas: défilement actif tant que les flèches sont survolées.

variante 2 : défilement horizontal automatique de 4 rubriques dans une zone de 200 pixels de largeur et 100 pixels de hauteur. Fond de zone de défilement avec image, bordure de cadre continu de couleur jaune. L'arrêt du défilement de la zone s'effectue en survolant la dite zone avec la souris.

variante 3 : défilement vertical automatique de 4 rubriques dans une zone de 200 pixels de largeur et 50 pixels de hauteur. Fond de zone de défilement gris sans bordure de cadre. L'arrêt du défilement de la zone s'effectue en survolant la dite zone avec la souris.

variante 4 : défilement horizontal manuel de 4 rubriques dans une zone de 130 pixels de largeur et 150 pixels de hauteur. Pas de fond de zone de défilement, sans de bordure de cadre. Le défilement de la zone s'effectue en survolant les flèches droite et gauche: défilement actif tant que les flèches sont survolées.

variante 5 : défilement vertical automatique de 3 images dans une zone de 160 pixels de largeur et 150 pixels de hauteur. Pas de fond de zone de défilement, sans bordure de cadre. L'arrêt du défilement de la zone s'effectue en survolant la dite zone avec la souris.

variante 6 : défilement horizontal manuel de 3 images dans une zone de 80 pixels de largeur et 100 pixels de hauteur. Pas de fond de zone de défilement, sans de bordure de cadre, flèches droites et gauches personnalisées. Le défilement de la zone s'effectue en survolant les flèches droite et gauche : défilement actif tant que les flèches sont survolées.

Comment l'intégrer (Récupère les éléments javascript)

Cliquez pour récupérer le fichier compressé Scroll.zip :
Copier ce fichier dans un emplacement de l'arborescence de votre site.
Décompresser le fichier.
vous devez obtenir un résultat de la forme suivante :

Créer une liste déroulante

Généralités

Chaque liste déroulante va posséder son propre répertoire contenant les fichiers de personnalisation. Ceci va permettre de créer éventuellement plusieurs listes déroulantes (avec des paramètres de contenus différents pour chacune d'entre elles) sur un même page Internet. Le contenu de Base sert de référence pour la création des listes déroulantes.

Par exemple nous allons créer la liste appelée MonTest.

Créer le répertoire MonTest au même niveau que le répertoire Base
Copier tous les fichiers du répertoire Base dans le répertoire MonTest
Vous devez obtenir le résultat suivant :

Installer les éléments principaux de la page html

Nous allons continuer avec l'exemple précédent (liste déroulante MonTest)

Dans ce qui suit 'Chemin à partir de votre page html/' est la description du chemin entre l'emplacement de la page html ou l'on va inclure une liste déroulante et le répertoire scroll contenant tous les éléments de fonctionnement et de paramétrage de la liste.

Entre <head> et </head>

Entre <body> et </body>

Le premier paramètre de la fonction Tscroll_init (ici 1) est le numéro de la liste déroulante. Si vous voulez mettre plusieurs fenêtres déroulantes dans une même page html vous devrez les numéroter de 1 à n. Sinon = 1.

Le second paramètre de la fonction Tscroll_init ("MonTest") est le nom de la liste déroulante : en fait le nom du répertoire spécifique de personnalisation de la liste déroulante. Chaque liste déroulante possède ses propres paramètres de personnalisation.

Paramétrer et personnaliser la liste déroulante

3 fichiers sont à paramétrer

scroll_custom.css
scroll_look_custom.js
scroll_Content_custom.js

Ces fichiers se trouvent dans le répertoire que vous venez de créer pour votre liste (voir ci dessus avec l'exemple MonTest). Pour chacun de ces fichiers les paramètres modifiables sont repérés en fond grisé.

Attention lors de la modification des paramètres des différents fichiers à bien conserver la syntaxe : points virgules, parenthèses, crochets et virgules.

Le fichier scroll_custom.css : style de la liste

/* Arrière plan fenêtre déroulante : couleur de base et image de fond*/
.Back {
    background-color: gray;
    background-image: url(../images/FontScrool.jpg);
}
/* En mode non automatique nature du curseur lors du survol des flèches*/
.ArrowUp, .ArrowDn {cursor: pointer;}

/* Style de base de la fenêtre déroulante */
.ItemBody {
   font-family: Verdana;
   font-size:11px;
   padding: 5px;
   text-align: justify;
}

remarques : pour ne pas avoir d'image de fond il suffit d'ignorer background-image de la manière suivante : /*background-image: url(../images/FontScrool.jpg);*/

Le fichier scroll_look_custom.js : Dimensions et comportements de la liste

var
LOOK = {
// Taille de la boite: [largeur, hauteur]
'size' : [200, 150],
// Bordure à appliquer à la boite
'border' : '1px dotted #306C75',
// Chemin d'accés aux images
'up' : '../images/adn.gif',
'dn' : '../images/aup.gif',
'hup' : '../images/art.gif',
'hdn' : '../images/alf.gif'
},
BEHAVE = {
// Mode de défilement (auto = true / manuel = false);
'auto' : false,
// Sens du défilement (si vertical=false => déplacement horizontal)
'vertical' : true,
// Vitesse de déplacement : nombre de pixels pour 40 millisecondes. Dans le mode automatique si l'on veut inverser le sens de déplacement il suffit de paramétrer une valeur négative.
'speed' : 10
};

remarques : le valeurs du paramètre 'size' sont des pixels. Pour changer l'image des flèches il suffit de changer le nom des images dans les paramètres 'up', 'dn' pour des flèches verticales et 'hup', 'hdn' pour le flèches horizontales.

Le fichier scroll_Content_custom.js : contenu de la liste

On va définir ici le contenu de ce qui va être affiché. Les données sont contenues dans la variable ITEMS. Chaque donnée représente le bloc de contenu qui va défiler. Les blocs ainsi définis vont défiler les uns à la suite des autres pour constituer la liste déroulante.

Paramètres d'un bloc

'content' contient les informations que l'on veut afficher dans la liste déroulante. Chaque article 'content' correspond à une page dans la fenêtre d'affichage. Cet élément peut contenir n'importe quel élément html : tableau, liste, images etc. ...

'file' . si 'content' est vide on peut définir dans 'file' l'adresse d'une page Web (URL absolue ou relative : ( 'file' : 'http://www...... '). Attention au temps de chargement des pages : à utiliser avec précautions.

"pause_b" durée de pause en secondes de l'affichage du premier article.
"pause_a" durée de pause en secondes de l'affichage du dernier article.

Constitution de la liste

var
ITEMS = [
{
'file' : '',
'content' : 'Démo 1 : Défilement manuel vertical Le défilement vers le haut ou vers le bas s\'active lors du survol des flèches prévues à cet effet',
'pause_b' : 1,
'pause_a' : 0
},

{
'file': '',
'content': 'Contenu 1 : Blabla...Blabla...Blabla...Blabla...Blabla... ',
'pause_b': 1,
'pause_a': 0
},

{
'file' : '',
'content': 'Contenu 2 : Blabla...Blabla...Blabla...Blabla...Blabla... ',
'pause_b' : 1,
'pause_a' : 0
},

{
'file' : '',
'content': 'Contenu 3 : Blabla...Blabla...Blabla...Blabla...Blabla... ',
'pause_b' : 1,
'pause_a' : 0
}

]

Exemple

Remarques sur le code

Chemin à partir de votre page html/ = ../../../JVS/Scroll/ . Cela signifie qu'à partir du répertoire de base de cette page il faut remonter de 3 niveaux puis sélectionner le répertoire JVS/Scroll

Création avec Tscroll_init de 2 listes déroulantes indexée 1 et 2 et relatives aux répertoire MontTest et Demo5 du répertoire principal Chemin à partir de votre page html/Scroll.

Sources des fichiers de personnalisation utilisés pour la présentations des possibilités en début de fiche

Cliquez pour récupérer le fichier compressé ConfigScroll.zip :