Onglets animés sexy avec MooTools

Utiliser un système de tabulation est un moyen moderne et attrayant de placer beaucoup de contenu dans un espace restreint. Ce tutoriel vous montrera comment créer un système de tabulations animé et sexy avec des sprites CSS, des cookies et un échange de tabulations animé..

Hypothèses

Il y a quelques hypothèses et notes que nous entrons dans ce système avec:

Nous utiliserons la version la plus récente de MooTools: 1.2.4.
Le client doit supporter JavaScript.
Nous utiliserons PHP pour tous les scripts côté serveur. Toute langue côté serveur de votre choix utilisera également la syntaxe / les méthodes correspondantes

Le didacticiel suppose également une connaissance de base de javascript. Une petite expérience de MooTools ou du framework JavaScript vous aidera.

La parcelle

Alors, comment ce système génial va-t-il fonctionner? Voici le schéma de base:

Lors du chargement de la page, nous produisons deux listes UL avec des éléments de liste: la première liste contient les onglets, la deuxième liste contient les éléments de contenu des onglets..
Pour chaque ensemble d'onglets que nous produisons, nous recherchons un cookie pouvant nous indiquer quel onglet doit être affiché en fonction de la visite précédente. Si aucun cookie n'est présent, nous assumons le premier onglet.
Lorsque l'utilisateur clique sur un onglet, l'élément de contenu en cours pour cet onglet disparaît et le contenu du nouvel onglet est inséré..
Nous sauvegardons l’index de l’onglet dans un cookie pour le chargement ultérieur (c’est-à-dire que nous voulons que le dernier onglet cliqué soit le premier à être affiché sur la page / visite suivante.)

Le système lui-même est assez résistant aux balles. Si l'utilisateur n'autorise pas les cookies, l'onglet de départ pour chaque liste sera toujours 0.
Si la prise en charge de JavaScript n'est pas présente, les onglets ne seront pas visibles à l'écran car ils s'afficheront: aucun; les initialement.

Première étape: le HTML

Le code HTML permettant de réaliser le système de tabulation et les éléments de contenu correspondants est d'une structure incroyablement simple.

   Onglet 1
 Onglet 2
 Onglet 3
 Onglet 4
 
 
  Ceci est le contenu de l'onglet 1.
 Ceci est le contenu de l'onglet 2.
 Ceci est le contenu de l'onglet 3.
 Ceci est le contenu de l'onglet 4.

Nous modifierons le code HTML ci-dessus avec PHP ultérieurement dans ce didacticiel afin de créer un système plus robuste..

Deuxième étape: CSS

Comme avec tout combo CSS et HTML, vous pouvez styler les onglets et leurs éléments de contenu comme vous le souhaitez.
J'ai choisi d'utiliser des sprites CSS de style Facebook pour mes exemples d'onglets..
Réalisez que vous voudrez styler les éléments suivants d'une manière spécifique pour que le système fonctionne:

Les éléments de contenu d'onglet doivent avoir une hauteur de 0 et leur débordement masqué. Cela permet à tous les éléments de contenu d'être "masqués", pour ainsi dire, lorsque la page se charge.
Entre les sélecteurs CSS "ul.tabs li a" et "ul.tabs li a.active", vous souhaiterez attribuer un aspect différent au sélecteur "actif" afin que l'utilisateur connaisse son onglet actuellement sélectionné..

 / * structure des onglets * / .tab-container width: 320px; fond: #eee; rembourrage: 5px 10px;  ul.tabs list-style-type: none; marge: 0; rembourrage: 0;  ul.tabs li float: left; marge: 10px 5px 0 0;  ul.tabs li a padding: 5px 10px; bordure: 1px solide #ddd; poids de police: gras; background: url (tab-sprite.jpg) 0 0 repeat-x; couleur: # 000; texte-décoration: aucun;  ul.tabs li a.active border-color: # 028433; position d'arrière-plan: 0 -96px; couleur: #fff;  / * sprite! changement de position en arrière-plan * / ul.tabs li a.active:hover text-decoration: none; curseur: par défaut;  ul.tabs li: hover text-decoration: underline;  ul.tabs-content margin: 10px 0 0 0; rembourrage: 0;  ul.tabs-content li hauteur: 0; débordement caché; marge: 0; rembourrage: 0;  / * efface les flottants * / div.clear clear: both;  / * c'est-à-dire corrige * / * html ul.tabs-content li float: left;  / * ie6 * / * + html ul.tabs-content li largeur: 99%; float: gauche;  / * ie7 * /

Notez que nous devons implémenter quelques correctifs spécifiques à Internet Explorer. moche, mais nécessaire.

Troisième étape: le Javascript MooTools

L'un des grands avantages de MooTools est le puissant système Class.
Les classes MooTools permettent des fonctionnalités flexibles, organisées et extensibles.
Notre classe MooTools s'appellera "TabSet". Puisque la classe TabSet effectue de nombreuses actions,
permet de décomposer chaque partie de la classe.

La première ligne donne toujours un nom à la classe:

 / * donne un nom à la classe * / var TabSet = new Class (

Ensuite, nous devons créer un objet qui contiendra les options de notre classe:

 options: // options d'onglet par défaut activeClass: 'active', // css class cookieName: ", // no name signifie pas de cookie cookieOptions: // options pour le cookie, si la durée de recherche du cookie est: 30, // 30 jours path: '/', startIndex: 0 // commence avec cet élément si aucun cookie ou actif,

Nos options nous permettent de définir:

activeClass: la classe CSS à attribuer à l'onglet actuellement sélectionné (ou "actif").
cookieName: nom du cookie qui représentera cet ensemble d'onglets. Si vous ne définissez pas un nom de cookie, les cookies ne seront pas utilisés.
cookieOptions: un objet qui contient les options pour le cookie.
startIndex: L'onglet à activer initialement. Commence par 0. Remplacé par la variable activeClass si un cookie est trouvé.

Avec seulement trois options dans la classe, TabSet serait considéré comme une classe relativement simple..

Ensuite, nous implémentons deux options et événements:

 Implémente: [Options, Evénements],

La mise en œuvre des options et des événements nous permettra de gérer correctement les options données et
déclenchez des événements de chargement et de modification personnalisés sur nos listes où que vous soyez.

Ensuite, nous définissons la méthode "initialize" qui s’exécute à la création de chaque instance de la classe:

 initialize: function (onglets, contenu, options) // gérer les arguments this.setOptions (options); // mélange les options données avec les options par défaut this.tabs = $$ (tabs); // enregistre les onglets donnés dans la classe this.contents = $$ (contents); // enregistre le "contenu" donné dans la classe // détermine l'onglet "actif" var actif = (Cookie.read (this.options.cookieName) || this.options.startIndex); // décide de l'index qui doit être initialement actif this.activeTab = this.tabs [active] .addClass (this.options.activeClass); // identifie maintenant l'onglet "actif" this.activeContent = this.contents [active] .setStyle ('height', 'auto'); // identifie le contenu "actif" // exécute chaque onglet / contenu par la méthode "processItem" que nous verrons ci-dessous this.tabs.each (fonction (tab, i) this.processItem (tab, this.contents [i], i);, ceci); // les onglets sont prêts - déclenche l'événement load! this.fireEvent ('load'); ,

Vient ensuite la méthode workhorse de notre classe TabSet: processItem:

 processItem: fonction (onglet, contenu, i) var contentHeight = content.getScrollSize (). y; // ajoute un événement de clic à l'onglet tab.addEvent ('clic', function () // si ce n'est pas l'onglet actif if (tab! = this.activeTab) // stopper if (e) e.stop ( ); // supprime la classe active de l'onglet actif this.activeTab.removeClass (this.options.activeClass); // rend l'onglet sélectionné (l'onglet.activeTab = onglet) .addClass (this.options.activeClass) ; // interpole le contenu de l'ancien onglet // entre le nouveau contenu et this.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in'). set ('tween ', onComplete: $ empty). tween (' height ', contentHeight); // déclenche l'événement de changement d'onglet this.fireEvent (' change ', [tab, contenu]); .bind (this)). setStyles (height: contentHeight, débordement: 'hidden'). fade ('out'). tween ('height', 0); // enregistre l'index dans un cookie si (this.options.cookieName) Cookie.write ( this.options.cookieName, i); .bind (this)); );

Voici le schéma de base de la méthode processItem:

Accepte un onglet, un élément de contenu et son index correspondants…
Calcule la hauteur de l'élément de contenu.
Ajoute un événement de clic à l'onglet qui:
1. Valide que cet onglet n'est pas déjà actif (nous ne voulons rien animer ou changer s'il clique sur l'onglet déjà actif)
2. Supprime la classe CSS "active" de l'onglet en cours et l'ajoute à l'onglet sur lequel vous venez de cliquer.
3. Glisse le contenu de l'onglet en cours hors de la vue, puis fait glisser le nouveau contenu dans la vue. L'événement "change" est déclenché à la fin de l'animation.
4. Enregistre l'index du nouvel onglet dans le cookie de sorte que lorsque l'utilisateur recharge la page ou passe à une autre page, le nouvel onglet sera sélectionné initialement.

Et maintenant, un exemple d'utilisation de notre classe:

 window.addEvent ('domready', function () var tabset = new TabSet ($$ ('# tabs1 li a'), $$ ('# # content1 li'), cookieName: 'liste de démonstration'); );

Nous fournissons à notre instance l'onglet LI A et le contenu LI. Nous fournissons également l'argument des options facultatives. Voilà comment il est facile d'utiliser cette classe! Voici la classe complète avec l'utilisation:

 / * class * / var TabSet = nouvelle classe (options: activeClass: 'active', // css class cookieName: ", cookieOptions: durée: 30, // chemin de 30 jours: '/', startIndex: 0 // commence par cet élément s'il n'y a pas de cookie ou d'actif, Implémente: [Options, Événements], initialize: function (onglets, contenu, options) // gère les arguments this.setOptions (options); this.tabs = $$ ( tabs); this.contents = $$ (contenu); // détermine l'onglet "actif" var active = (Cookie.read (this.options.cookieName) || this.options.startIndex); this.activeTab = this. tabs [active] .addClass (this.options.activeClass); this.activeContent = this.contents [active] .setStyle ('height', 'auto'); // traite chaque onglet et le contenu this.tabs.each (fonction (tab, i) this.processItem (tab, this.contents [i], i);, this); // les onglets sont prêts - chargez-le! this.fireEvent ('load');, processItem: fonction (onglet, contenu, i) var contentHeight = content.getScrollSize (). y; // ajoute un événement de clic à l'onglet tab.addEvent ('clic', fonction (e) // stop! if (e) e.stop (); // si ce n'est pas le onglet actif if (tab! = this.activeTab) // supprime la classe active de l'onglet actif this.activeTab.removeClass (this.options.activeClass); // transforme l'onglet actif en onglet actif (this.activeTab = tab) .addClass (this.options.activeClass); // interpole l'ancien contenu de l'onglet // entre le nouveau contenu et this.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in'). set ('tween' , onComplete: $ empty). tween ('height', contentHeight); // déclenche l'événement de changement d'onglet this.fireEvent ('change', [tab, contenu]); .bind (this)). setStyles (height: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', 0); // sauvegarde l'index dans le cookie if (this.options.cookieName) Cookie.write (this.options.cookieName, i, this.options.cookieOptions);  .bind (this)); ); / * usage * / window.addEvent ('load', fonction () var tabset = new TabSet ($$ ('# tabs1 li a' '), $$ (' # # content1 li '), cookieName:' demo- liste' ); );

Quatrième étape: PHP / HTML

Rappelez-vous comment j'ai dit que nous modifierions notre code HTML original avec PHP? C'est le moment. Depuis que nous peut
avoir un cookie défini pour notre TabSet, nous devrions essayer de détecter cela lorsque nous produisons l'onglet HTML.
Pourquoi? Parce que nous voulons que les onglets se chargent en douceur. Nous souhaitons également répondre aux besoins des utilisateurs pour lesquels JavaScript ou les cookies ne sont pas activés..
Sans ce PHP, vous remarquerez peut-être un léger "saut" dans la zone de contenu actif.

    " > Onglet 1
 " > Onglet 2
 " > Onglet 3
 " > Onglet 4
 
 
  > Ceci est le contenu de l'onglet 1. Ceci est le contenu de l'onglet 1. Ceci est le contenu de l'onglet 1. Ceci est le contenu de l'onglet 1. Ceci est le contenu de l'onglet 1. Ceci est le contenu de l'onglet 1. Ceci est le contenu de l'onglet 1. Ceci est le contenu de l'onglet 1.
 > Ceci est le contenu de l'onglet 2. Ceci est le contenu de l'onglet 2. Ceci est le contenu de l'onglet 2. Ceci est le contenu de l'onglet 2. Ceci est le contenu de l'onglet 2. Ceci est le contenu de l'onglet 2. Ceci est le contenu de l'onglet 2. Ceci est le contenu de l'onglet 2.
 > Ceci est le contenu de l'onglet 3. Ceci est le contenu de l'onglet 3. Ceci est le contenu de l'onglet 3. Ceci est le contenu de l'onglet 3. Ceci est le contenu de l'onglet 3. Ceci est le contenu de l'onglet 3. Ceci est le contenu de l'onglet 3. Ceci est le contenu de l'onglet 3.
 > Ceci est le contenu de l'onglet 4. Ceci est le contenu de l'onglet 4. Ceci est le contenu de l'onglet 4. Ceci est le contenu de l'onglet 4. Ceci est le contenu de l'onglet 4. Ceci est le contenu de l'onglet 4. Ceci est le contenu de l'onglet 4. Ceci est le contenu de l'onglet 4.

Cinquième étape: PHP: accommoder les utilisateurs sans Javascript ou les cookies

Certains utilisateurs n'activent pas JavaScript ni les cookies pour des raisons de sécurité. Nous souhaitons toujours que notre système fonctionne pour eux. Si vous vous rappelez du bloc de code précédent,
nous utilisons des liens avec une clé de chaîne de requête de "liste de démonstration" pour indiquer un changement d'onglet. Le bloc suivant de PHP en haut de la page (avant TOUT type de sortie) sera
aidez-nous à changer la valeur du cookie dans l'onglet demandé.

Notez que nous actualisons la page uniquement si nous pouvons vérifier que le cookie a été défini. Si le cookie n'a pas été défini, les cookies de l'utilisateur sont désactivés.

Mission accomplie!

Voici un résumé rapide des avantages de la classe MooTools TabSet:

Notre classe implémente des événements afin que nous puissions créer des événements personnalisés et des gestionnaires d'événements..
La mise en page de l'ensemble du système est entièrement contrôlée par HTML et CSS simples.
L'utilisation de cookies pour se souvenir de l'onglet précédent est une grande amélioration de la convivialité.
La classe même qui est une classe MooTools permet de l’implémenter facilement d’un projet à l’autre..

Le MooTools en ligne Javascript

J'ai toujours préconisé de coder une fonctionnalité MooTools souhaitée "en ligne" avant de la transformer en classe. Voici le code JavaScript MooTools intégré:

 $$ ('ul.tabs'). each (function (tabList) // récupère la liste de contenus var tabContentList = tabList.getNext ('ul.tabs-content'), // récupère le nom du cookie, qui est l'attribut "title" de la liste d'onglets cookie = 'demo-list', // l'index d'onglet de départ startIndex = Cookie.read (cookie) || 0, // récupère les éléments d'onglet actuels LIs title ', "). getElements (' li '), // récupère le contenu des éléments LI lis = tabContentList.getElements (' li '), // l'onglet (LI) actuellement actif activeTab = tabs [startIndex] .addClass ('active'), // le contenu LI actuellement actif activeContent = lis [startIndex] .setStyle ('height', 'auto'); // pour chaque onglet de cet onglet / relation de contenu… tabs.each (fonction (tab, i) // stopper if (e) e.stop (); // calcule la hauteur de l'élément de contenu respectif var content = lis [i], contentHeight = content.getScrollSize (). y; // ajoutez le clic. événement à l'onglet qui… tab.addEvent ('clic', fonction () // si ce n'est pas l'onglet actuellement activé… if (tab! = activeTab) // add and remove la classe active de l'ancien vs nouvel onglet activeTab.removeClass ('active'); (activeTab = tab) .addClass ('active'); // lance l'effet wc up up, wipe down actifContent.set ('tween', onComplete: function () activeContent = content.fade ('in'). set ('tween', onComplete: $ empty). tween ('hauteur', contentHeight);). setStyles (hauteur: contentHeight, débordement: 'caché'). fade ('out'). tween ('hauteur', '0'); // écrit dans le cookie Cookie.write (cookie, i); //ailette! ); ); // déclenche l'événement click activeTab.fireEvent ('click'); );

Notez que toutes les instructions "var" en haut deviennent des arguments ou des options pour la classe. La transition de MooTools JavaScript intégré à une classe est extrêmement simple!

Avoir des idées d'amélioration?

Vous avez plus d'idées pour ce cours? Assurez-vous de les partager dans les commentaires ci-dessous!

Écrire un tutoriel Plus

Saviez-vous que vous pouvez gagner jusqu'à 600 USD en écrivant un tutoriel et / ou un screencast PLUS pour nous?? Nous recherchons des didacticiels détaillés et bien écrits sur HTML, CSS, PHP et JavaScript. Si vous en avez la possibilité, veuillez contacter Jeffrey à l'adresse [email protected]..

Veuillez noter que la rémunération réelle dépendra de la qualité du didacticiel final et du screencast..

Suivez-nous sur Twitter ou abonnez-vous au fil RSS Nettuts + pour obtenir les meilleurs tutoriels de développement Web sur le Web..

Code