Créer un système d'onglets pour indexer le contenu de vos articles

Je vais vous fournir, dans cet article, un pack de code vous permettant d'afficher les différents paragaphes de vos articles sous forme d'onglets, réduisant ainsi de façon conséquente la longueur de vos pages web et permettant une lisibilité accrue du contenu aux visiteurs de votre site.

 

Ce que vous allez réaliser

 

Voici un petit cours sur l'huile d'olive afin d'illustrer cet exemple

 L'huile d'olive

 

Ses caractéristiques organoleptiques varient en fonction du terroir et des pratiques agronomiques, de la variété (ou cultivar), et du stade de maturité à la récolte. Aujourd'hui, c'est un produit de consommation courante, mais les amateurs choisissent des bouteilles dont le prix rivalise parfois avec les grands vins. En effet, plusieurs huiles d'olives sont classées en Appellation d'origine contrôlée (AOC).

Les caractéristiques organoleptiques sont regroupées en trois rubriques principales :

1.Goût : l'amertume est le seul goût que peut présenter l'huile d'olive. On en détermine l'intensité à la dégustation.
2.Arômes : l'ensemble des sensations aromatiques d'une huile constitue son fruité, on en détermine l'intensité à la dégustation, sa catégorie (fruité mûr, fruité vert, fruité noir) et sa description analogique (rappelle la pomme, la tomate …).
3.Sensations kinesthésiques et tactiles : une huile d'olive peut présenter une sensation spécifique, l'ardence (ou piquant), et des différences d'onctuosité. On détermine l'intensité du piquant à la dégustation, l'onctuosité peut faire l'objet de commentaires, mais il n'existe pas d'échelle organoleptique pour cette sensation.

Aucune des sensations ci-dessus n'est considérée comme un défaut.

Les défauts reconnus par les professionnels[réf. nécessaire] sont : le rance (oxydation), le moisi, le chomé (fermentation excessive des olives en tas), le lies (fermentation des particules de pulpe dans les huiles non filtrées avec ou sans sédimentation).

Ces défauts ont comme point commun dans leurs origines une attention insuffisante portée à la qualité des travaux, et dans leurs conséquences une disparition des attributs amer et piquant.

L'obtention d'un litre d'huile nécessite 4 à 10 kilos d'olives suivant la variété d'olive utilisée et son niveau de maturité. La méthode d'extraction utilisée a peu d'incidence. Cependant, les moulins utilisant des presses ne peuvent pas utiliser des olives à très forte teneur en eau (à faible rendement en huile) à cause de la fluidité excessive de la pâte. Ceci peut laisser penser, à tort, que leurs rendements sont meilleurs.

Les caractéristiques de l'huile d'olive sont les suivantes :

  • point de fumée : 210 °C contre 180 °C pour la température normale de friture.
  • densité : 0,92 (1 litre d'huile d'olive pèse environ 920g).
  • apport calorique : 9 kcal par gramme
  • conservation : l'huile d'olive rancit moins vite grâce à son indice d'iode peu élevé : 78/88 contre 83/98 pour l'huile d'arachide et 120/132 pour l'huile de tournesol. Elle se conserve mieux si elle est stockée au frais et protégée de la lumière. Il est préférable de la consommer dans les deux années suivant sa fabrication.

L'huile d'olive est composée d'environ 99 % de matières grasses. Le 1 % restant constitue les composés mineurs ; il s'agit essentiellement (par ordre d'importance) : du squalène, des alcools triterpéniques, des stérols (β-sitostérol), des phénols, et des dérivés du tocophérol.

La matière grasse de l'huile d'olive est composée de triglycérides. Ceux-ci sont constitués d'acides gras de différentes sortes, dont la répartition est caractéristique de l'huile d'olive, et à un niveau de détail plus poussé, des différentes variétés ou du lieu de production. Lorsque des triglycérides sont dégradés, les acides gras qui les constituaient sont détachés et errent librement dans l'huile : ils sont alors dits « acides gras libres ». Leur pourcentage dans l'huile est ce que l'on appelle « acidité » de l'huile, et s'exprime en « grammes d'acide oléique libre pour 100 grammes d'huile ». Cette acidité ne se perçoit jamais sous forme de goût acide, mais sous la forme de telle ou telle dégradation, comme par exemple un goût de moisi.

Les différentes catégories d'huile d'olive reçoivent une dénomination correspondant à des critères fixés par la règlementation :

  • les « huiles d'olive vierges » sont obtenues à partir du fruit de l'olivier uniquement par des procédés mécaniques ou d'autres procédés physiques dans des conditions (thermiques) qui n'entraînent pas d'altérations de l'huile et n'ayant subi aucun traitement autre que le lavage, la décantation, la centrifugation ou la filtration, à l'exclusion des huiles obtenues par solvant ou par des mélanges avec des huiles d'autre nature. Ce sont des purs jus de fruits et plus le taux d'acidité de l'huile est bas, meilleure est la qualité. On les classe par ordre de qualité décroissante en « huile d'olive vierge extra » (absence de défaut organoleptique, présence de fruité, et acidité inférieure à 0,8 % exprimée en acide oléique), « huile d'olive vierge » (intensité maximale des défauts organoleptique 3,5 sur 10, présence de fruité, acidité maximale 2 %), « huile d'olive vierge courante » (intensité maximale des défauts organoleptique 6 sur10 et acidité maximale 3,3 %) et « huile d'olive vierge lampante » (défaut organoleptique supérieur à 6 sur 10 et/ou acidité supérieure à 3,3 %). Dans la réglementation européenne, la catégorie « huile d'olive vierge courante » n'existe pas et les huiles correspondantes sont regroupées dans la catégorie « huile d'olive vierge lampante ».
  • les « huiles d'olive raffinées » sont obtenues par le raffinage (industriel) d'huiles d'olive vierges, dont l'acidité libre exprimée en acide oléique ne peut être supérieure à 0,3g pour 100g et dont les autres caractéristiques sont conformes à celles prévues pour cette catégorie.
  • les « huiles d'olive-composées d'huiles d'olive raffinées et d'huiles d'olive vierges » sont constituées par un coupage d'huile d'olive raffinée et d'huiles d'olive vierges autre que lampante, dont l'acidité libre ne peut être supérieur à 1,0 g pour 100 g.
  • les « huiles de grignons d'olive brutes » sont obtenues par traitement au solvant de grignons d'olive, à l'exclusion des huiles obtenues par tout mélange avec des huiles d'autre nature.
  • les « huiles de grignons d'olive raffinées » sont obtenues par le raffinage d'huile de grignons d'olive brute, dont l'acidité libre ne peut être supérieur à 0,3 g pour 100 g.
  • les « huiles de grignons d'olive » sont obtenues par coupage d'huile de grignons d'olive raffinée et d'huile d'olive vierge autre que lampante dont la teneur en acide oléique ne dépasse pas 1,0 g pour 100 g.

Dans l'Union Européenne, la mention d'une provenance est obligatoire pour les huiles d'olive vierges et vierges extra depuis 2002. Les mentions de provenance autorisées sont limitées à la mention du pays d'origine, ou d'une aire géographique reconnue (AOC, AOP, DOP, IGP). Il est interdit de porter dans l'étiquetage une mention du département ou de la région s'il ne s'agit pas d'une aire d'appellation (par exemple il est interdit de mentionner « huile d'olive du Var » ou « huile d'olive d'Andalousie » car ces régions ne correspondent pas à des appellations enregistrées). Néanmoins, quel que soit le pays de l'Union Européenne duquel provient l'huile, il peut n'être mentionné sur l'étiquetage que la provenance européenne, ce qui apporte peu de précision. Le conditionneur est libre d'apporter plus de précision en citant le pays membre précis, si cela présente un avantage pour la commercialisation. L'origine de l'huile d'olive est définie par le lieu de récolte des olives et le lieu de transformation. Ainsi, la mention « Huile d'olive de France » signifie que l'huile a été obtenue d'olives récoltées et triturées en France.

Contenu soumis à la licence CC-BY-SA. Source : Article Huile d'olive de Wikipédia en français (auteurs)

 

Préparation

Pour mettre en place cette application sur votre site, vous aurez besoin de plusieurs fichiers :

  • 3 fichiers d'origine JQuery : JQuery classique, ici en version 1.8.2.min ; JQuery Tools qui ne contiendra que le module Tabs et JQuery.easing version 1.3, un plug-in de transition et de fondu pour JQuery
  • Un fichier CSS qui contiendra les différentes règles de styles de cette application, nommé pour l'exemple "nav_onglet_style.css"
  • Votre page HTML qui accueillera cette application
  • une image au format .png de dimension 12 x 7px que vous appelerez dans les règles CSS
Pour vous faciliter cette préparation, vous pouvez télécharger l'ensemble des fichiers JQuery ici :

 

Mise en place de la structure HTML

L'integration du menu se fait par une liste à puces classique qui sera encapsulée dans un élément <nav> propre au HTML5. Chaque contenu d'onglet sera intégré dans un élément <section> tous placés dans une <div> ayant pour id "excontent".
Ces 2 éléments seront ensuite reliés par le plug-in JQuery Tools.
Le titre de votre article est, quand à lui, placé dans un élément <h1> dont vous définirez les règles dans le fichier .css.

<body>

...

<h1>Titre de votre article</h1>
<p>&nbsp;</p>

<nav>
<ul id=
"tabs">
<li><span class=
"current"><a class="current" href="#">onglet1</a></span></li>
<li>
<a href="#">onglet2</a></li>
<li>
<a href="#">onglet3</a></li>
<li>
<a href="#">onglet4</a></li>
<li>
<a href="#">onglet5</a></li>
</ul>
<span id=
"indicator"></span>
</nav>

<div id=
"excontent">

<section>
<p>
Contenu de l'onglet 1
</p>
</section>

<section>
<p>
Contenu de l'onglet 2
</p>
</section>

<section>
<p>
Contenu de l'onglet 3
</p>
</section>

<section>
<p>
Contenu de l'onglet 4
</p>
</section>

<section>
<p>
Contenu de l'onglet 5
</p>
</section>

</div>
</p>
</div>

...

</body>

 

Un peu de javascript

Nous allons maintenant insérer un peu de Javascript dans le <body> de notre page, de préférence au dessus de notre application pour ordonner un peu l'ensemble de code de votre page HTML.

Ce code aura plusieurs fonctions :

  • Déclarer l'exécution d'une nouvelle fontion dès que le DOM est chargé (DOM : méthode standard pour accéder et manipuler des documents HTML)
  • Appeler la fonction Tabs de JQuery Tools
  • Indiquer les éléments à afficher lorsque l'on change d'onglet
  • Indiquer au plug-in que nous désirons appliquer un effet de fondu au changement d'onglet

Voici le code à insérer

<body>

...

<script type="text/javascript">

$(function() {

var indicator = $('#indicator'),
indicatorHalfWidth = indicator.width()/2,
lis = $('#tabs').children('li');

$("#tabs").tabs("#content section", {
effect: 'fade',
fadeOutSpeed: 0,
fadeInSpeed: 400,
onBeforeClick: function(event, index) {
var
li = lis.eq(index),
newPos = li.position().left + (li.width()/2) - indicatorHalfWidth;
indicator.stop(true).animate({ left: newPos }, 600, 'easeInOutExpo');
}
})
;

});

</script>

...

</body>

 

Appel des bibliothèque Jquery et du fichier CSS

Rien de plus simple, cet appel s'effectue dans le <head> de votre page de la manière habituelle

<head>

<link rel="stylesheet" type="text/css" href="nav_onglet_style.css" />

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type=
"text/javascript" src="jquery.tools.min.js"></script>
<script type=
"text/javascript" src="jquery.easing.1.3.js"></script>

...

</head>

 

Definition des règles CSS

Je vous fournis ici les règles propres à cet exemple (le fichier "nav_onglet_style.css"), il vous appartient de les modifier en fonction du design graphique final attendu (car ça je ne peux pas le faire pour vous ;) ).
Comme d'habitude je travail à partir d'une feuille de style externe, mais ces règles peuvent aussi etre intégrées dans le <head> de votre page HTML.

h1 {
font-size: 24px;
line-height: 1;
font-weight: bold;
color: #feffff;
}

/* Navigation */
nav {
margin-bottom: 30px;
position: relative;
}

nav ul {
overflow: hidden;
padding-bottom: 10px;
border-bottom: 5px solid #bbb;
}

nav li {
float: left;
margin-right: 35px;
text-decoration: none;
list-style-type: none;
}

nav li a {
color: #666;
font-weight: bold;
text-decoration:none;
list-style-type: none;
}

nav li a:hover, nav li a:focus, nav li a.current {
color: #849460;
text-decoration: none;
list-style-type: none;
}

nav #indicator {
position: absolute;
left: 15px;
bottom: 5px;
width: 12px;
height: 7px;
background-image: url('../images/flecheH.png');
}

/* Contenu des onglets */
#excontent section {
display: none;
}

#excontent p {
margin-bottom: 20px;
width: auto;
line-height: 1.6;
}

 

Conclusion

Si vous avez bien suivi les étapes de ce tuto, votre application est maintenant opérationnelle, vous pouvez dès lors la tester sur votre navigateur. Il ne vous reste plus qu'à définir les titres et contenus de votre article pour proposer à l'utilisateur de votre site une page avec un style dynamique et intuitif.