Nous avons tous constaté l'effet de type "accordéon" utilisé sur de nombreux sites Web 2.0. Cependant, beaucoup de scripts d'accordéon sont lourds, exploitent mal les bibliothèques sur lesquelles ils sont basés et ne traitent pas de choses telles que s'assurer que l'accordéon garde une hauteur constante. Dans ce didacticiel, nous allons utiliser les bibliothèques Prototype et Scriptaculous pour créer un accordéon léger et intelligent..
Démo et code source
Étape 1 - Le but
Notre objectif est de créer un script accordéon léger basé sur les bibliothèques JavaScript Prototype et Scriptaculous.. L'accordéon devrait:
Autoriser un nombre illimité de volets accordéon
Être complètement stylé par CSS
Soyez discret, les utilisateurs sans javascript devraient voir tout votre contenu en accordéon
Être léger-avec relativement peu de lignes de code; utiliser la délégation d'événements pour limiter la consommation de mémoire.
Soutenir tout type de contenu dans l'accordéon
Assurez-vous que lorsque le contenu de chaque panneau d'accordéon change, la hauteur de l'accordéon reste constante pour éviter l'effet agaçant de "page rebondissante"
Ceci est un tutoriel relativement avancé qui suppose que le lecteur a une connaissance raisonnable de Javascript, CSS, HTML, orienté objet programmation et une compréhension de base des bibliothèques Prototype et Scriptaculous. Cependant, le code source complet est disponible pour que vous puissiez étudier et le code est très simple à lire et à apprendre si vous n'êtes pas familier avec la bibliothèques utilisées.
Avant de commencer, vous pouvez voir une démonstration de travail de l'accordéon en action.
Étape 2 - Commencez par le balisage de base
Pour commencer, nous allons créer quelques balises HTML simples pour notre accordéon:
Basculer 1
Contenu 1
Basculer 2
Contenu 2
Basculer 3
Contenu 3
Basculer 4
Contenu 4
Étape 3 - Ajoutez du style
Ensuite, nous devons ajouter un peu de style autour de notre accordéon pour le faire ressembler à un accordéon. Pour commencer, nous ferons un premier passage du style de base, puis nous en ajouterons plus lorsque tout fonctionnera. Il y a aussi quelques autres styles à inclure pour que l’accordéon s’affiche correctement pendant l’animation..
div # test-accordéon margin: 10px; border: 1px solid #aaa; div.accordion position: relative; / * requis pour la délimitation - corrige une "particularité" dans le prototype * / div.accordion-toggle position: relative; / * requis pour l'effet * / z-index: 10; / * requis pour l'effet * / background: #eee; / * requis pour l'effet - peut être n'importe quoi sauf "transparent" * / cursor: pointeur; div.accordion-toggle-active background: #fff; div.accordion-content overflow: hidden; / * requis pour l'effet * / background: #aaa;
Voir l'accordéon de base avec une simple feuille de style.
Étape 4 - Créer la classe d'accordéon Javascript
Le prototype fournit un cadre merveilleux pour la construction de classes en Javascript et nous allons utiliser cette fonctionnalité pour construire notre classe d'accordéon. Cette classe contiendra toutes les propriétés et méthodes d’un accordéon: le volet, le contenu de l'accordéon, les méthodes pour développer et contracter les volets et les méthodes de gestion des événements pour définir ce qui se passe lorsque les utilisateurs effectuent une action telle que cliquer sur. Pour le moment, nous allons définir la structure de base de la classe ainsi que toutes les propriétés et méthodes dont nous aurons besoin:
var Accordion = Class.create (initialize: function () this.accordion = null; / * Stocke un pointeur sur l'élément accordéon * / this.contents = null; / * Tableau de pointeurs sur les en-têtes et les volets de contenu de l'accordéon. l'accordéon * / this.options = null; / * Permet à l'utilisateur de définir les noms des classes CSS * / this.maxHeight = 0; / * Stocke la hauteur du volet de contenu le plus haut * / this.current = null; / * Stocke un pointeur sur le volet de contenu actuellement développé * / this.toExp = =;; / * Stocke un pointeur sur le volet de contenu à développer lorsqu'un utilisateur clique sur * / this.isAnimating = false; / * Garde la trace de l'animation en cours d'exécution * /, checkMaxHeight: function () , / * Détermine la hauteur du volet de contenu le plus haut * / initialHide: function () , / * Masque les volets qui ne sont pas affichés par défaut * / attachInitialMaxHeight: function () , / * Garantit que la hauteur du premier volet de contenu correspond à la plus haute * / expand: function (el) , / * Indique à la fonction d'animation quelle est elem ents to animate * / animate: function () , / * Exécute l'animation réelle de l'effet accordéon * / handleClick: function (e) / * Déterminez l'endroit où un utilisateur a cliqué et agissez en fonction de ce clic * / )
Ce sont les méthodes de base et les propriétés dont nous aurons besoin lors de la construction de notre accordéon. Chacune des prochaines étapes vous guidera dans la construction de chaque méthode jusqu'à ce que nous ayons un accordéon fonctionnel Si, à un moment quelconque du tutoriel, vous avez besoin une mise à jour rapide sur l'utilisation de chaque méthode ou propriété, vous pouvez utiliser ce code très commenté comme référence.
Étape 5 - Initialiser: démarrez
Les classes de prototypes ont une méthode spéciale appelée initalize () qui est un constructeur; cela signifie qu'il agit lorsque l'utilisateur crée un nouvel objet d'instance de cette classe. Pour tout accordéon, nous devons savoir 2 choses avant de commencer:
L'identifiant de l'élément accordéon.
La position de départ par défaut de l'accordéon (si autre chose que la première position)
Nous devrons donc permettre à notre constructeur d’accepter ces deux paramètres. De plus, notre constructeur doit:
Récupérer et stocker l'accordéon et son contenu en tant que pointeurs sur ces éléments
Définir les options définies par l'utilisateur
Définir l'élément développé actuel
Déterminez la hauteur maximale que nous utiliserons comme hauteur pour tous nos volets de contenu et appliquez-la.
Masquer les volets de contenu qui ne sont pas affichés par défaut
Ajouter un écouteur d'événement à l'accordéon pour surveiller les clics de l'utilisateur.
Voici le code de notre méthode initialize ():
initialize: function (id, defaultExpandedCount) if (! $ (id)) throw ("Tentative d'initialisation de l'accordéon avec id:" + id + "qui n'a pas été trouvé."); this.accordion = $ (id); this.options = toggleClass: "accordion-toggle", toggleActive: "accordion-toggle-active", contentClass: "accordion-content" this.contents = this.accordion.select ('div.' + this.options. contentClass); this.isAnimating = false; this.maxHeight = 0; this.current = defaultExpandedCount? this.contents [defaultExpandedCount-1]: this.contents [0]; this.toExpand = null; this.checkMaxHeight (); this.initialHide (); this.attachInitialMaxHeight (); var clickHandler = this.clickHandler.bindAsEventListener (this); this.accordion.observe ('click', clickHandler);
Comme vous pouvez le constater, nous avons défini toutes nos propriétés sur des valeurs par défaut raisonnables et avons appelé 3 méthodes pour vous aider à définir les paramètres. up. Enfin, nous avons attaché le gestionnaire d’événements à l’accordéon. Créons ces trois méthodes et le gestionnaire d'événement.
Étape 6 - Vérification de l'élément le plus haut
L’un des impératifs de notre accordéon est qu’il soit adapté pour que même lorsque le volet de contenu le plus haut est développé, la hauteur globale de l'accordéon restera constante. Pour atteindre cet objectif, nous allons parcourir les volets de contenu. déterminer lequel est le plus grand et définir la propriété maxHeight en conséquence:
checkMaxHeight: function () pour (var i = 0; i this.maxHeight) this.maxHeight = this.contents [i] .getHeight ();
Étape 7 - Cacher le reste
Notre accordéon ne doit afficher que le volet de contenu spécifié comme volet actuel; tous les autres doivent être cachés par défaut. De plus, nous devons définir l'attribut height de ce volet de contenu à 0; cela empêche le volet de contenu de apparaissant brièvement complètement développé avant d'animer correctement.
initialHide: function () for (var i = 0; i
Étape 8 - Afficher le volet de contenu par défaut
Maintenant que nous avons tout caché sauf le volet de contenu par défaut, nous devons nous assurer que le volet de contenu par défaut s'affiche correctement. le style "actif" doit être appliqué à son en-tête et sa hauteur doit correspondre à la propriété maxHeight:
attachInitialMaxHeight: function () this.current.previous ('div.' + this.options.toggleClass) .addClassName (this.options.toggleActive); if (this.current.getHeight ()! = this.maxHeight) this.current.setStyle (hauteur: this.maxHeight + "px");
Étape 9 - Créer le gestionnaire d'événement
Si vous venez d'un contexte de gestion d'événement traditionnel dans lequel nous attachons le gestionnaire d'événement à chaque zone sur laquelle nous voulons cliquer., il peut sembler déroutant que nous attachions le gestionnaire à un seul élément. Nous utilisons un événement délégation. Pour ceux d'entre vous qui ne connaissent pas le sujet, j'ai écrit un bref aperçu de la délégation d'événements qui vous présenterons le concept et pourquoi il est si important. Cela dit, nous avons besoin d’un gestionnaire d’événements intelligent:
clickHandler: function (e) var el = e.element (); if (el.hasClassName (this.options.toggleClass) &&! this.isAnimating) this.expand (el);
Il y a deux parties à cette fonction. Tout d'abord, nous déterminons ce qui a été cliqué. Ensuite, nous vérifions que c’était bien un rubrique qui a été cliquée et qu'aucune animation n'est en cours d'exécution. Si tel est le cas, nous appelons la méthode expand () pour commencer le processus de l'accordéon. La variable que nous passons à la méthode expand () est l'en-tête sur lequel l'utilisateur a cliqué.
Étape 10 - Démarrer le processus
Nous pouvons maintenant commencer le processus d’effet accordéon. Nous savons que la méthode expand () doit prendre un paramètre pour la élément qui a été cliqué. En utilisant ce paramètre, la méthode expand détermine quel volet de contenu doit être développé et si n'est pas déjà développé, appelle la méthode animate () pour "faire sa magie!"
expand: function (el) this.toExpand = el.next ('div.' + this.options.contentClass); if (this.current! = this.toExpand) this.toExpand.show (); this.animate (); ,
Étape 11 - Faire le "sale boulot"
À ce stade, toutes les pièces sont en place. nous savons quel volet de contenu est actuellement affiché, nous savons quelle rubrique l'utilisateur a cliqué et nous savons quel volet de contenu il a demandé à afficher. Maintenant, nous devons créer l'accordéon animation. Pour cela, nous allons créer une méthode animate () qui utilisera la classe Scriptaculous Effect.Parallel pour rendre les deux animations ensemble; et la classe Effect.Scale pour modifier la taille de chaque volet de contenu. La méthode animate va effectuez ces étapes:
Créez un tableau qui sera utilisé pour stocker nos objets Effect.Scale
Collectez les paramètres à transmettre au constructeur Effect.Scale pour le volet de contenu à afficher et créez-les. L'object
Ajouter cet objet à notre tableau
Collectez les paramètres à transmettre au constructeur Effect.Scale pour le volet de contenu qui sera masqué et créez L'object
Ajouter cet objet à notre tableau
Créez l'objet Effect.Parallel qui exécutera nos objets Effect.Scale est synchronisé..
Dites à notre objet accordéon que nous animons
Lancer les animations
Nettoyez tous les styles laissés pour compte
Dites à notre objet accordéon que nous avons fini d'animer
Pour une explication complète des paramètres d’option, nous passons à la fois aux objets Effect.Scale et Effect.Parallel., veuillez consulter la documentation Scriptaculous. Les aspects importants de la méthode sont les méthodes beforeStart et afterFinish de notre Effect.Parallel. L'avant-départ La méthode indique à l'accordéon qu'il est en train d'animer. Cela empêchera le gestionnaire d’événements de tenter de démarrer. toute autre modification tant que l'animation est en cours. Il s'assure également que le titre sur lequel vous avez cliqué est étant donné le nom de la classe "active". La méthode afterFinish masque complètement le volet de contenu précédemment affiché. (après qu'il ait disparu à cause de l'animation). Cela garantit également que la hauteur finale du contenu nouvellement affiché le volet est correct. Maintenant que le swap est terminé, il indique à notre accordéon que le volet de contenu actuellement développé est le celui que nous venons d'agrandir et que l'animation est terminée.
Étape 12 - Ajout de plus de style
À ce stade, nous avons un accordéon d'aspect décent, que vous pouvez voir en action ici. Mais avec un peu de CSS, nous pouvons rendre le tout beaucoup plus spectaculaire. Nous avons donc d’abord créé une maquette rapide de Photoshop afin d’avoir une idée approximative de son apparence. Dans cet esprit, nous aurons besoin de trois images:
Une image 'logo' -
Un couple de belles images de fond - et
Et voici le code CSS révisé:
corps remplissage: 130px 50px 50px 50px; background: # 252422 url (… /img/logo.gif) no-repeat; position de fond: 60px 40px; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Sans-serif; taille de police: 11px; hauteur de ligne: 18px; div # test-accordéon border: 1px solid # 343230; couleur de fond: # 21201f; rembourrage: 10px; div.accordion position: relative; / * requis pour la liaison * / http: //net.tutsplus.com/wp-admin/users.php width: 800px; div.accordion-toggle position: relative; / * requis pour l'effet * / z-index: 10; / * requis pour l'effet * / background: # 3f3c38 url (… /img/off.jpg) repeat-x; position de fond: en bas; couleur: #fff; curseur: pointeur; marge inférieure: 1px; remplissage: 9px 14px 6px 14px; bord supérieur: solidité 1px # 5d5852; div.accordion-toggle: survolez, div.accordion-toggle-active image-fond: url (… /img/on.jpg); couleur de fond: # 6d493a; border-top: 1px solide # a06b55; div.accordion-content overflow: hidden; / * requis pour l'effet * / background: # 302e2c; couleur: # c4bab1; border-bottom: 1px solid # 000; div.accordion-content p marge: 9px 24px 6px 24px;
Comme vous pouvez le voir ici, nous avons:
Ajout de quelques styles de fond autour de la page et de la classe d'accordéon
Compte tenu de l'accordéon-bascule div une couleur de fond régulière
Définissez l'accordéon-bascule: survol et les états actifs pour qu'ils utilisent le même arrière-plan rougeâtre
Étape 13 - La voir en action
Vous pouvez voir la démonstration de travail ici. Vous pouvez également ajouter vos propres CSS et images adapter le look à votre site.
Share
Accentsconagua
et 
