Back

Projet 3 jQuery

Création d’une table des matières dynamique

  1. Objectifs

    • Utiliser Jquery pour créer une table des matières dynamique

  2. Présentation

    • Description
      • Une table des matières est un moyen courant pour permettre aux utilisateurs d’accéder rapidement à la section de contenu
        qu’ils cherchent.
      • Avec jQuery, il est possible de créer dynamiquement une table des matières, basée sur les éléments <header> HTML de la page.
      • Ceci est très utile pour les articles de blog ou d’autres sites qui ont beaucoup de pages de contenu différentes.
    • Fichiers
      • Créez les trois fichiers projet03.html, projet03.css et projet03.js et laissez ouverts et prêt pour l’édition.
      • Une fois les fichiers requis créés, procédez comme suit pour créer une table dynamique du contenu:



  3. Comment faire…

    • Créez une page Web de base en utilisant le code HTML suivant, en l’ajoutant à la projet03.html:
      • <!DOCTYPE html>
<html>
<head>
<title>Chapter 6 :: Recipe 5</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link href="projet03.css" rel="stylesheet" type="text/css" />
<script src="projet03.js"></script>
</head>
<body>
</body>
</html>

  4. La Page HTML

    • Ajoutez le code HTML suivant à projet03.html dans les balises de body que vous venez de l’ajouter; cela va créer une page avec un contenu en sections et un élément de liste ordonné qui peut être rempli avec du contenu:
      • <div class="header">
  <h1>TABLE DES MATIÈRES DYNAMIQUE</h1>
  </div><div class="content-frame">
  <div class="left">
  <h1 id="one">TITRE PRINCIPAL</h1>
  <ul>
    <li>Une table des matières est un moyen courant pour permettre aux utilisateurs d'accéder rapidement à la section de contenu
  qu'ils cherchent.</li>
    <li> Avec <strong>jQuery</strong>, il est possible de créer dynamiquement une table des matières, basée sur les éléments <code>&lt;header></code> HTML de la page.</li>
    <li>Ceci est très utile pour les articles de blog ou d'autres sites qui ont beaucoup de pages de contenu différentes.</li>
  </ul>
  <h2 id="two">SOUS-TITRE</h2>
  <ul>
    <li>Créez les trois fichiers projet03.html, projet03.css et projet03.js et laissez ouverts et prêt pour l'édition.</li>
    <li>Une fois les fichiers requis créés, procédez comme suit pour créer une table dynamique du contenu:</li>
  </ul>
  <h3 id="three">SOUS-TITRE</h3>
  <p>Notre code jQuery sélectionne d'abord la section de contenu, puis trouve tous les éléments d'en-tête
    à l'intérieur en utilisant la fonction jQuery find () et en spécifiant h1, h2, h3, h4 comme seul
    argument. Cela va créer un tableau des éléments trouvés et les stocker dans les _headers
    tableau comme indiqué dans l'extrait de code suivant:</p>
  <h2 id="four">SOUS-TITRE</h2>
  <p>Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h3 id="five">SOUS-SOUS-TITRE</h3>
  <p>Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h4 id="six">SOUS-SOUS-SOUS-TITRE</h4>
  <p>Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="right">
  <h2>CONTENTS</h2>
  <ol class="contents"></ol>
  </div>
  </div>

  5. La Page CSS

    • Ajoutez le CSS suivant à projet03.css pour ajouter des styles de base à cette page.
      • @import url(https://fonts.googleapis.com/css?family=Ubuntu);
body {
margin: 0;
background-color: #5dace7;
font-family: 'Ubuntu', sans-serif;
}
.header {
height: 150px;
background-color: #0174cd;
}
.header h1 {
width: 1000px;
margin: auto;
padding: 0;
line-height: 100px;
font-size: 40px;
color: #FFFFFF;
}
.content-frame {
margin: -50px auto auto auto;
width: 1000px;
background-color: #FFFFFF;
border-radius: 10px;
min-height: 1300px;
position: relative;
}
.content-frame .left {
margin-right: 240px;
padding: 20px;
}
.content-frame .left h1 {
margin: 0;
}
.content-frame .right {
width: 200px;
padding: 10px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
background-color: #F1F1F1;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.content-frame .right h2 {
margin: 0;
padding: 0;
}

  6. La Page JS

    • Ajoutez le code jQuery suivant à projet03.js, qui remplira la liste ordonnée sur la base des sections en-tête de la page HTML que nous venons de créer:
      • $(function(){
    var _contents = $('.content-frame .left');
    var _headers = _contents.find("h1, h2, h3, h4");
    _headers.each(function(index, value){
    var _header = $(value);
    var level = parseInt(_header.context.localName.
    replace("h", ""));
    if (typeof _header.attr("id") != "undefined") {
    var listItem = $("<li><a href='#" + _header.attr("id")
    + "'>" + _header.html() + "</a></li>");
    } else {
    var listItem = $("<li>" + _header.html() + "</li>");
    }
    listItem.css("padding-left", (level * 5));
    $('.contents').append($(listItem));
    });
    });

  7. Comment ça fonctionne…

    • Ouvrir la projet03.html dans une page Web vous présentera le contenu à gauche côté de l’écran et la liste de contenu générée dynamiquement à droite comme illustré dans la capture d’écran suivante:

      • Projet 3 jQuery

    • Le code HTML fournit un volet de contenu avec diverses sections intitulées h1, h2, h3 et h4 balises et un élément de liste ordonné vide.
    • Notre code jQuery sélectionne d’abord la section de contenu, puis trouve tous les éléments d’en-tête à l’intérieur en utilisant la fonction jQuery find() et en spécifiant h1, h2, h3, h4 comme seul argument. Cela va créer un tableau des éléments trouvés et les stocker dans les _headers tableau comme indiqué dans l’extrait de code suivant:
      • $(function(){
var _contents = $('.content-frame .left');
var _headers = _contents.find("h1, h2, h3, h4");
// --- HIDDEN CODE
});

  8. Explication

    • En utilisant la fonction jQuery each (), il est alors possible de parcourir tous les en-têtes trouvés éléments et construire la table des matières.
    • La variable locale _header est d’abord déclarée et l’élément d’en-tête actuel est stocké dans cette variable.
    • Pour pouvoir mettre en retrait des sous-sections dans la table des matières, ce qui permet à l’utilisateur de voir plus facilement la structure du contenu, le code doit déterminer à quel niveau l’en-tête actuel est: h1 étant le niveau supérieur et h5 étant le bas.
    • En utilisant _header.context.localName, nous pouvons obtenir la balise de l’élément d’en-tête (par exemple, h1) et supprimer le « h » avec le JavaScript remplacer().
    • Ensuite, nous pouvons convertir la valeur restante en un entier en utilisant parseInt (). nous se retrouvent avec une valeur que nous pouvons utiliser pour déterminer le niveau de l’élément d’en-tête. Ce processus est illustré dans l’extrait de code suivant:
      • $(function(){
var _contents = $('.content-frame .left');
var _headers = _contents.find("h1, h2, h3, h4");
_headers.each(function(index, value){
var _header = $(value);
var level = parseInt(_header.context.localName.replace("h",
""));
// --- HIDDEN CODE
});
});
    • Nous pouvons maintenant créer l’élément list, que nous insérerons dans la liste ordonnée. Afin de lier les éléments de la table des matières à la section de contenu appropriée, nous devons vérifier voir si l’élément d’en-tête a un ID auquel nous pouvons nous lier.
    • Si c’est le cas, nous créons une liste élément avec un lien; sinon, nous créons un élément de liste de base en exécutant le code suivant:
      • $(function(){
var _contents = $('.content-frame .left');
var _headers = _contents.find("h1, h2, h3, h4");
_headers.each(function(index, value){
var _header = $(value);
var level = parseInt(_header.context.localName.replace("h",
""));
if (typeof _header.attr("id") != "undefined") {
var listItem = $("<li><a href='#" + _header.attr("id") +
"'>" + _header.html() + "</a></li>");
} else {
var listItem = $("<li>" + _header.html() + "</li>");
}
listItem.css("padding-left", (level * 5));
$('.contents').append($(listItem));
});
});
    • Enfin, une fois l’élément de liste créé, la fonction css () et la variable level sont utilisé pour ajouter le remplissage requis pour l’indentation et l’élément de liste créé est ajouté à la liste ordonnée du contenu.



    Source: inspiration du livre JQuery 2.0 Development Cookbook
    Auteurs: Revill, Leon

Projet 2 jQuery
Sommaire du cours jQuery
author avatar
Riadh HAJJI

Riadh HAJJI

You may also like

Correction application animate() V2
4 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre …

La méthode animate() de jQuery v2
4 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre …

Correction application animate()
3 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre …