Mis à jour le mercredi 12 juillet 2017
  • 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Les plugins jQuery

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

JQuery est un framework Javascript devenu incontournable au fil des années. Les créateurs de Bootstrap l'ont choisi pour offrir des plugins esthétiques et faciles à mettre en œuvre, dans la plupart des cas sans même mettre les doigts dans du code Javascript ! Toutefois, si vous voulez obtenir le meilleur de ces plugins, il vous faudra un peu manipuler jQuery.

J'ai traité les plugins les plus importants en délaissant Affix qui est à la fois simple d'utilisation et d'un usage limité. Une page d'exemple servira à la fois de collecteur de cas pratiques et de fil conducteur.​

Généralités

La librairie jQuery

Javascript, c'est quoi ?

  • C'est un langage de script qui permet de rendre les pages web interactives.

  • C'est un langage qui fonctionne côté client et ne demande aucune ressource au niveau du serveur.

  • C'est un langage interprété directement par le navigateur.

jQuery, c'est quoi ?

jQuery est une librairie Javascript, on dit aussi un framework, c'est à dire un ensemble de fonctionnalités bien pratiques pour simplifier la mise en œuvre de Javascript. On peut ainsi facilement :

  • Modifier des éléments d'une page web : texte, style, animation...

  • Gérer des événements tels : clic de souris, action sur une touche du clavier...

  • Créer des effets graphiques...

  • Utiliser Ajax...

Installation de jQuery

Pour installer jQuery il faut faire un appel à la bibliothèque. Pour cela vous avez deux solutions :

  1.  Vous allez chercher la dernière version sur le site http://jquery.com/download/ et vous copiez ce fichier dans un répertoire de votre site.

  2.  Vous référencez un CDN : jQuery, cdnjs, Google CDN, Microsoft CDN...

Si vous choisissez de télécharger la librairie, vous trouvez 3 lignes de versions : la 1, la 2 et la 3. Les 2 premières comportent les mêmes fonctionnalités, la seule différence est que la seconde ne prend pas en charge Internet Explorer dans ses versions 6 à 8. Vous avez donc le choix de la version, les 2 étant parfaitement adaptées à Bootstrap 3. Quant à la version 3 je vous engage à aller lire les explications directement sur le site.

Vous trouvez aussi 2 possibilités au niveau du téléchargement :

  • Uncompressed : c'est une version lisible et commentée pour comprendre le code. Vous l'utilisez pendant le développement de vos sites si vous avez besoin de savoir ce qui se passe dans la bibliothèque.

  • Minified : c'est une version compressée pour être la plus "légère" possible. C'est cette version que vous devez privilégier pour la mettre sur votre site en "production"

Quand vous cliquez sur le lien, vous pouvez télécharger le fichier. Donnez-lui le nomjquery.js pour la version complète etjquery.min.js la version compressée.

Placer jQuery

Il est bon d'organiser un peu les fichiers d'un site en répertoires thématiques (voir figure suivante).

Organisation des dossiers d'un site
Organisation des dossiers d'un site

Si vous organisez ainsi l'architecture de votre site, déposez les fichiers jQuery dans le répertoire js.

Référencer jQuery

Si vous avez placé la librairie sur votre site, il suffit de référencer le fichier dans le code HTML, de préférence à la fin pour ne pas péjorer le chargement des éléments visuels :

<script src="js/jquery.js"></script>

Si vous passez par un CDN, c'est la même chose, à part l'adresse qui change. Par exemple :

<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
Utiliser jQuery

La principale fonction à connaître estjQuery(), mais on utilise le symbole$ pour faire plus court. On veut utiliser jQuery seulement lorsque le DOM de la page est totalement chargé pour éviter les erreurs d'exécution, ainsi on encapsule tout le code dans un bloc :

$(function(){
   // ...
});

Si vous connaissez les sélecteurs CSS, vous savez déjà utiliser une grande partie de jQuery. En effet, cette librairie les utilise directement ! Par exemple :

var a = $("div");

Ici la variable"a" référence un objet jQuery qui sélectionne toutes les balisesdiv du document.

JQuery propose aussi des méthodes, par exemple pour ajouter une classe à un élément :

$("img").addClass( "ma_classe" );

Cette action ajoute la classema_classeà toutes les balisesimgdu document. Il est possible de chaîner les méthodes. Par exemple :

$('#el').css('background-color', 'red').fadeIn('slow');

Ici on change la propriétébackground-colorde l'élément avec l'identifiant#el, avec la valeurred, et on le fait apparaître progressivement.

Une grande force de jQuery réside aussi dans sa gestion facilitée des événements, par exemple :

$( "#action" ).click(function() {
  … mon code … 
});

Ici, un clic sur l'élément d'identifiant#actionva provoquer l'exécution du code.

Les librairies Javascript de Bootstrap

Référencement

Bootstrap propose un certain nombre de plugins pour améliorer les pages web, ils sont tous fondés sur jQuery (voir figure suivante). Il y a deux façons de faire appel à ces plugins :

  • soit vous référencez juste ce qui vous est utile en prenant la librairie correspondante dans le pack de Bootstrap (que vous récupérez en cliquant sur "Download source" sur la page "Getting Started" comme à la figure suivante).

Les librairies Javascript de Bootstrap
  • soit vous référencez la bibliothèque complète (que vous récupérez en cliquant sur "Download Bootstrap" sur la même page).

Dans la première hypothèse, il faut faire attention aux dépendances. Elles ne sont pas nombreuses mais il faut les connaître :

  • popover doit être utilisé avec tooltip

  • collapse doit être utilisé avec transition

Pour référencer les plugins dans l'hypothèse de l'utilisation individuelle, par exemple pourtab :

<script src="js/jquery.js"></script> 
<script src="js/tab.js "></script>

On déclare d'abord jQuery, puis ensuite le plugin. Dans l'hypothèse de la librairie globale :

<script src="js/jquery.js"></script> 
<script src="js/bootstrap.min.js "></script>

Vous pouvez utiliser la version commentée pendant la phase de développement :

<script src="js/jquery.js"></script> 
<script src="js/bootstrap.js "></script>
Mise en œuvre

Il y a 2 façons d'utiliser un plugin de Bootstrap :

  • à partir des attributsdata

  • à partir d'objets jQuery

Prenons un exemple avec l'effet accordéon que nous verrons en détail ultérieurement :

<a href="#item" data-toggle="collapse">Changer</a> 
<div id="item" class="collapse">
  Contenu
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>

Ne vous inquiétez pas pour la syntaxe globale que nous verrons plus tard. Ce plugin est destiné à faire apparaître ou disparaître un contenu lors d'une action de l'utilisateur, ici un simple clic. Le contenu concerné dans cet exemple est le motContenu. Le plugin est déclenché par l'attributdata-toggle="collapse". Dans cette hypothèse d'utilisation, vous n'avez pas à manipuler de Javascript.

On peut obtenir exactement le même résultat en utilisant jQuery :

<a>Changer</a> 
<div id="item" class="collapse">
  Contenu
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
  $(function() {
    $('a').click(function() {
      $('#item').collapse('toggle');
    });
  });
</script>

Cette fois je n'ai pas utilisé l'attribut mais un objet jQuery avec le sélecteur'a'pour pointer le lien et la méthodecollapseavec le paramètretoggle. Nous verrons plusieurs cas d'utilisation de cette façon de procéder qui est plus laborieuse que la précédente, mais qui s'avère incontournable selon les actions que nous voulons effectuer.

Les événements

La plupart des plugins exposent des événements. En poursuivant l'exemple précédent, on peut faire apparaître un message lorsque le contenu est visible :

<a>Changer</a> 
<div id="item" class="collapse">
  Contenu
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
  $(function() {
    $('a').click(function() {
      $('#item').collapse('toggle');
    });
    $('#item').on('shown.bs.collapse', function () {
      alert('On me voit !');
    })
  });
</script>

Nous verrons aussi plusieurs exemples d'événements dans les plugins de Bootstrap.

La page d'exemple

Pour éviter de surcharger de code les chapitres sur les plugins, voici la page d'exemple complétée avec des cas d'utilisation des plugins concernés :

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body { 
        background-color:#DDD;
        padding-top: 10px;
      }
      [class*="col-"] { margin-bottom: 20px; }
      img { width: 100%; }
      .well {
        background-color:#CCC;
        padding: 20px;
      }
      a:active, a:focus { outline:none; }
      .inline-form input {
        display: inline-block;
        width: 100px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <nav class="navbar navbar-inverse" role="navigation">   
        <div class="navbar-header">   
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Les Tigres</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li> <a href="#">Accueil</a> </li>
            <li class="dropdown"> 
              <a data-toggle="dropdown" href="#">Témoignages <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Dompteurs</a></li>
                <li><a href="#">Zoos</a></li>
                <li><a href="#">Chasseurs</a></li>
                <li class="divider"></li>
                <li><a href="#">Autres témoignages</a></li>
              </ul>
            </li> 
            <li> <a href="#">Liens</a> </li>
            <li> <a href="#">Références</a> </li>
          </ul>
          <form class="navbar-form navbar-right inline-form" role="form">
            <div class="form-group">
              <input type="search" class="input-sm form-control" placeholder="Recherche">
              <button type="submit" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span> Chercher</button>
            </div>
          </form>
        </div>
      </nav>
      <header class="row">
        <div class="col-lg-12">
          <h1>Mon amour pour les tigres</h1>
        </div>
      </header>
      <section class="row">
        <div class="col-lg-12">
          <p>
            Je suis passionné par les <strong>tigres</strong> depuis très longtemps. Ce site a été construit en <em>   hommage à ces merveilleux félins...</em><br>
            Je fais partie de la <abbr title="Société des Amoureux des Tigres">SAT</abbr> qui a pour but de faire connaître ces splendides animaux. 
          </p>
          <p>Voici ce qu'en dit le wikipedia :</p>
          <blockquote>
            Le Tigre (Panthera tigris) est un <a data-toggle="tooltip" href="#" title="Classe de vertébrés">mammifère</a> carnivore de la famille des félidés (Felidae) du genre Panthera. Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus grands <a data-toggle="tooltip" 
href="#" title='Synonyme de "carnassier"'>carnivores </a>du monde. L'espèce est divisée en neuf sous-espèces possédant des différences mineures en termes de taille ou de comportement. Superprédateur, il chasse principalement les cerfs et les sangliers, bien qu'il puisse s'attaquer à des proies de taille plus importante comme les buffles. Jusqu'au XIXe siècle, le Tigre était réputé mangeur d'homme. La structure sociale des tigres en fait un animal solitaire ; le mâle possède un territoire qui englobe les domaines de plusieurs femelles et ne participe pas à l'éducation des petits.<br>
            <small class="pull-right">Wikipedia</small><br>
          </blockquote>
        </div>      
      </section>
      <section class="row">
        <div class="media col-lg-12">
          <div class="pull-right">
            <iframe width="420" height="320" src="http://www.youtube.com/embed/VmnIeLmjuHA" frameborder="0" allowfullscreen></iframe>
          </div>
          <div class="media-body">
            <div class="btn-group pull-right" data-toggle="buttons">
              <label class="btn btn-primary active">
                <input type="radio">Vidéo 1
              </label>
              <label class="btn btn-primary">
                <input type="radio">Vidéo 2
              </label>
              <label class="btn btn-primary">
                <input type="radio">Vidéo 3
              </label>
            </div>
          </div>
        </div>
      </section>
      <section class="row">
        <div class="col-xs-4 col-sm-3 col-md-2 ">
          <a href="#" class="thumbnail">
            <img src="images/t1.jpg" alt="Tigre" class="img-rounded">
          </a>
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2 ">
          <a href="#" class="thumbnail">
            <img src="images/t2.jpg" alt="Tigre" class="img-rounded">
          </a>
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2 ">
          <a href="#" class="thumbnail">
            <img src="images/t3.jpg" alt="Tigre" class="img-rounded">
          </a>
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2 ">
          <a href="#" class="thumbnail">
            <img src="images/t4.jpg" alt="Tigre" class="img-rounded">
          </a>
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2 ">
          <a href="#" class="thumbnail">
            <img src="images/t5.jpg" alt="Tigre" class="img-rounded">
          </a>
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2 ">
          <a href="#" class="thumbnail">
            <img src="images/t6.jpg" alt="Tigre" class="img-rounded">
          </a>
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2 ">
          <a href="#" class="thumbnail">
            <img src="images/t7.jpg" alt="Tigre" class="img-rounded">
          </a>
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2 ">
          <a href="#" class="thumbnail">
            <img src="images/t8.jpg" alt="Tigre" class="img-rounded">
          </a>
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2 ">
          <a href="#" class="thumbnail">
            <img src="images/t9.jpg" alt="Tigre" class="img-rounded">
          </a>
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2 ">
          <a href="#" class="thumbnail">
            <img src="images/t10.jpg" alt="Tigre" class="img-rounded">
          </a>
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2 ">
          <a href="#" class="thumbnail">
            <img src="images/t11.jpg" alt="Tigre" class="img-rounded">
          </a>
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2 ">
          <a href="#" class="thumbnail">
            <img src="images/t12.jpg" alt="Tigre" class="img-rounded">
          </a>
        </div>
      </section>
      <div class="row">
        <section class="col-sm-4">
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">Les sous-espèces des tigres :</h3>
            </div>
            <div class="list-group">
              <a href="#infos" class="list-group-item" data-toggle="modal">
                Tigre de Sibérie
                <span class="badge">120</span>
              </a>
              <div class="modal fade" id="infos" role="dialog" aria-labelledby="modalTitre" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                      <h4 id="modalTitre" class="modal-title">Plus d'informations sur le tigre de Sibérie</h4>
                    </div>
                    <div class="modal-body">
                      <blockquote>
                        Les tigres de Sibérie pèsent de 180 à 350 kg pour les mâles et de 100 à 200 kg pour les femelles. Le plus gros tigre de Sibérie, tué en 1950, atteignait les 384 kg. Le Tigre de Sibérie est le troisième plus gros prédateur terrestre derrière l'ours kodiak et l'ours polaire. La longueur totale du corps avec la queue est comprise entre 2,7 et 3,8 m pour les mâles et entre 2,4 et 2,75 m pour les femelles. La longueur du crâne est de 341 à 383 mm pour les mâles et 279 à 318 mm pour les femelles.<hr>
                        <small class="pull-right">Wikipedia</small>
                      </blockquote>
                    </div>
                  </div>
                </div>
              </div>
              <a href="#" class="list-group-item">
                Tigre de Chine méridionale
                <span class="badge">540</span>
              </a>
              <a href="#" class="list-group-item">
                Tigre de Bali
                <span class="badge">230</span>
              </a>
              <a href="#" class="list-group-item">
                Tigre de d'Indochine
                <span class="badge">240</span>
              </a>
              <a href="#" class="list-group-item">
                Tigre de Malaisie
                <span class="badge">1200</span>
              </a>
              <a href="#" class="list-group-item">
                Tigre de Java
                 <span class="badge">710</span>
              </a>
              <a href="#" class="list-group-item">
                Tigre de Sumatra
                <span class="badge">20</span>
              </a>
              <a href="#" class="list-group-item">
                Tigre du Bengale
                <span class="badge">40</span>
              </a>
              <a href="#" class="list-group-item">
                Tigre de la Caspienne
                <span class="badge">200</span>
              </a>
            </div>
          </div>
        </section>
        <section class="col-sm-8">
          <div id="carousel" class="carousel slide">
            <ol class="carousel-indicators">
              <li data-target="#carousel" data-slide-to="0" class="active"></li>
              <li data-target="#carousel" data-slide-to="1"></li>
              <li data-target="#carousel" data-slide-to="2"></li>
              <li data-target="#carousel" data-slide-to="3"></li>
            </ol>
            <div class="carousel-inner">
              <div class="item active"> <img alt="Tigre" src="images/photo-tigre.jpg"></div>
              <div class="item"> <img alt="Tigre" src="images/photo-tigre1.jpg"></div>
              <div class="item"> <img alt="Tigre" src="images/photo-tigre2.jpg"></div>
              <div class="item"> <img alt="Tigre" src="images/photo-tigre3.jpg"></div>
            </div>
          </div>
        </section>
      </div>
      <div class="row">
        <section class="col-sm-12">
          <div class="panel panel-primary">
            <table class="table table-striped table-condensed">
              <div class="panel-heading"> 
                <h3 class="panel-title">Les menaces pour les tigres</h3>
              </div>
              <thead>
                <tr>
                  <th>Lieu</th>
                  <th>Menace</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Grand Mekong</td>
                  <td>Demande croissante de certaines parties de l’animal pour la médecine chinoise traditionnelle et fragmentation des habitats du fait du développement non durable d’infrastructures</td>
                </tr>
                <tr>
                  <td>Île de Sumatra</td>
                  <td>Production d’huile de palme et de pâtes à papiers</td>
                </tr>
                <tr>
                  <td>Indonésie et Malaisie</td>
                  <td>Pâte à papier, l’huile de palme et le caoutchouc</td>
                </tr>
                <tr>
                  <td>États-Unis</td>
                  <td>Les tigres captifs représentent un danger pour les tigres sauvages</td>
                </tr>
                <tr>
                  <td>Europe</td>
                  <td>Gros appétit pour l’huile de palme</td>
                </tr>
                <tr>
                  <td>Népal</td>
                  <td>Commerce illégal de produits dérivés de tigres</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
      <div class="row">
        <section class="col-sm-8">
          <ul class="nav nav-pills">
            <li class="active"><a href="#contact" data-toggle="tab">Contact</a></li>
            <li><a href="#informations" data-toggle="tab">Informations pratiques</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active fade in" id="contact">
              <form class="well" role="form">
                <h4><span class="label label-default">Si vous voulez me laisser un message</span></h4>
                <h4>Comment m'avez-vous trouvé ?</h4>
                <fieldset>
                  <div class="radio">
                    <label for="ami" class="radio">
                      <input type="radio" name="origine" value="ami" id="ami">
                      Par un ami 
                    </label>
                  </div>
                  <div class="radio">
                    <label for="web" class="radio">
                      <input type="radio" name="origine" value="web" id="web">
                      Sur le web 
                    </label>
                  </div>
                  <div class="radio">
                    <label for="hasard" class="radio">
                      <input type="radio" name="origine" value="hasard" id="hasard">
                      Par hasard 
                    </label>
                  </div>
                  <div class="radio">
                    <label for="autre" class="radio">
                      <input type="radio" name="origine" value="autre" id="autre">
                      Autre... 
                    </label>
                  </div>
                  <label for="textarea">Votre message :</label>
                    <textarea id="textarea" class="form-control" rows="4"></textarea>
                    <p class="help-block">Vous pouvez agrandir la fenêtre</p>
                    <button class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-ok-sign"></span> Envoyer</button>
                </fieldset>
              </form>
            </div>
            <div class="tab-pane fade" id="informations">
              <div class="well">
                <h2>Informations pratiques</h2>
                <p>Si vous êtes intéressés par la protection des tigres et si vous désirez prendre part aux actions menées... blablabla...</p>
              </div>
            </div>
          </div>
        </section>
        <section class="col-sm-4">
          <address class="thumbnail">
            <p>Vous pouvez me contacter à cette adresse :</p>
            <strong>Tigrou Alfred</strong><br>
              Allée des fauves<br>
              28645 Félins-sur-Loire<br>
          </address>
        </section>
      </div>
    </div>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script>
      $(function (){ 
        $('.carousel').carousel();
        $('blockquote a').tooltip(); 
        $('.btn-group .btn:nth-child(1)').click(function () {
          $('iframe').attr('src', 'http://www.youtube.com/embed/VmnIeLmjuHA');
        })
        $('.btn-group .btn:nth-child(2)').click(function () {
          $('iframe').attr('src', 'http://www.youtube.com/embed/fRAG4T-iqqY');
        })
        $('.btn-group .btn:nth-child(3)').click(function () {
          $('iframe').attr('src', 'http://www.youtube.com/embed/yua4jzecCIE');
        })
      });
    </script>
  </body>
</html>

Tester

Je détaillerai dans chaque chapitre la mise en œuvre des différents plugins utilisés dans cette page.

Menu déroulant

Menu déroulant dans la barre de navigation

Le plugin jQuery Dropdown permet de faire de jolis menus déroulants. Il suffit de modifier une barre de navigation pour ajouter un menu déroulant :

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-default">
        <ul class="nav navbar-nav">
          <li> <a href="#">Accueil</a> </li>
          <li> <a href="#">Liens</a> </li>
          <li class="dropdown"> 
            <a data-toggle="dropdown" href="#">Témoignages<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Dompteurs</a></li>
              <li><a href="#">Zoos</a></li>
              <li><a href="#">Chasseurs</a></li>
              <li class="divider"></li>
              <li><a href="#">Autres témoignages</a></li>
            </ul>
          </li>
          <li> <a href="#">Références</a> </li>
        </ul>
      </nav>
    </div>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
  </body>
</html>
Menu déroulant dans une barre de navigation

Il a fallu ajouter quelques classes mais le résultat est très réussi !

Voyons ça de plus près : pour ajouter la fonctionnalité de dropdown, il faut utiliser la classedropdownet ajouterdata-toggle="dropdown"dans la balise concernée pour que le menu fonctionne. Ici, je l'ai fait pour la balise <a> qui contient le libellé du lien du menu. Il faut aussi utiliser la classedropdown-menudans la balise<ul>qui doit englober le menu déroulant.

C'est ce qui a été réalisé dans la page d'exemple.

Menu déroulant dans un bouton

On peut créer un menu déroulant activé par un bouton. Voici un code de base :

<div class="btn-group"> 
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action</button>
  <ul class="dropdown-menu">
    <li><a href="#">Dompteurs</a></li>
    <li><a href="#">Zoos</a></li>
    <li><a href="#">Chasseurs</a></li>
    <li class="divider"></li>
    <li><a href="#">Autres témoignages</a></li>
  </ul>
</div>

Vous remarquez l'utilisation de la classebtn-groupnécessaire au fonctionnement du plugin, ainsi que la classedropdown-toggle. Pour le reste c'est pratiquement identique au code qu'on a vu pour la barre de navigation. Vous trouverez le résultat à la figure suivante.

Menu déroulant dans un bouton

C'est pas mal, mais comme ça, on ne comprend pas vraiment que c'est un bouton spécial, on peut avoir un repère graphique ?

On peut, en ajoutant une classe :

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>

J'ai ajouté la classecaretpour le bouton et maintenant celui-ci est bien identifié, comme à la figure suivante.

Menu déroulant dans un bouton avec repère

Oui c'est bien, mais parfois j'ai besoin que le menu s'affiche vers le haut

On peut aussi le faire, en ajoutant la classedropup(voir figure suivante) :

<div class="btn-group dropup">
Menu se déroulant vers le haut
Des boutons colorés et des icônes

On peut aussi ajouter des icônes et avoir de la couleur, comme pour tout bouton (voir figure suivante) :

<div class="btn-group"> 
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Dompteurs</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Zoos</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span> Chasseurs</a></li>
    <li class="divider"></li>
    <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Autres témoignages</a></li>
  </ul>
</div>
Des icônes dans un menu déroulant
Séparer les fonctions

On peut faire en sorte que le bouton ait 2 usages : en tant que bouton pour une action et en tant que déclencheur de menu déroulant. Il est alors séparé en 2 parties : à gauche pour l'action, à droite pour le menu. Pour réaliser cela, on crée un groupe de 2 boutons, un avec le texte, l'autre avec le signe, comme à la figure suivante :

<div class="btn-group"> 
  <button class="btn btn-info">Action</button>
  <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Dompteurs</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Zoos</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span> Chasseurs</a></li>
    <li class="divider"></li>
    <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Autres témoignages</a></li>
  </ul>
</div>
Deux fonctions pour un bouton
En-têtes

Pour ajouter des en-têtes pour subdiviser le menu, il faut utiliser la classedropdown-header(voir figure suivante) :

<div class="btn-group"> 
  <button class="btn btn-info">Action</button>
  <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li class="dropdown-header"> Personnel</li>
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Dompteurs</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span> Chasseurs</a></li>
    <li class="divider"></li>
    <li class="dropdown-header"> Lieux</li>
    <li><a href="#"><span class="glyphicon glyphicon-book"></span> Bibliothèques</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-cutlery"></span> Restaurants</a></li>
  </ul>
</div>
Des en-têtes dans un menu déroulant
Alignement à droite

Par défaut, le menu est aligné sur le côté gauche du bouton. On peut utiliser la classedropdown-menu-right  pour l'aligner sur le côté droit (voir figure suivante) :

<div class="btn-group"> 
  <button class="btn btn-warning">Action</button>
  <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Dompteurs</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Zoos</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span> Chasseurs</a></li>
    <li class="divider"></li>
    <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Autres témoignages</a></li>
  </ul>
</div>
Menu déroulant aligné à droite
Désactiver une option

Pour rendre une option du menu inactive, il faut utiliser la classedisabled:

<div class="btn-group"> 
  <button class="btn btn-danger">Action</button>
  <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#"><span class="glyphicon glyphicon-book"></span> Lire</a></li>
    <li class="disabled"><a href="#"><span class="glyphicon glyphicon-print"></span> Imprimer</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Ecrire</a></li>
  </ul>
</div>
Option désactivée dans un menu déroulant
Des sous-menus

La version 3 de Bootstrap, principalement orientée vers l'informatique nomade, n'a pas reconduit la possibilité de créer des sous-menus. Il est toutefois possible avec quelques styles de rétablir cette possibilité (astuce trouvée sur le site bootply). Prévoyez ces styles pour votre page :

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;
border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

Voici un exemple de mise en œuvre (voir le résultat à la figure suivante) :

<div class="btn-group"> 
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Dompteurs</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Zoos</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span> Chasseurs</a></li>
    <li class="divider"></li>
    <li class="dropdown-submenu">
      <a tabindex="-1" href="#"><span class="glyphicon glyphicon-list-alt"></span> Autres témoignages</a>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#"><span class="glyphicon glyphicon-eye-close"></span> Non classifiés</a></li>
        <li class="dropdown-submenu">
          <a href="#">Autres...</a>
          <ul class="dropdown-menu">
            <li><a href="#"><span class=" glyphicon glyphicon-cutlery"></span> Restaurateurs</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-globe"></span> Voyageurs</a></li>
          </ul>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Commerçants</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Mécaniciens</a></li>
      </ul>
    </li>
  </ul>
</div>
Des sous-menus
Des sous-menus

Activation par Javascript

Déclenchement du menu

Tant qu'on veut une mise en œuvre du menu déroulant avec un clic, la propriétédata-toggle est suffisante. Mais il peut se présenter des cas de figure particuliers. Imaginez que vous vouliez déclencher le menu déroulant non plus par un clic, mais par le passage du curseur de la souris au-dessus d'un élément particulier. Dans ce cas, vous devez utiliser jQuery pour faire fonctionner votre menu. Regardez cet exemple :

<div class="btn-group"> 
  <h1 data-toggle="dropdown"><span class="label label-default">Passez sur moi !</span></h1>
  <ul class="dropdown-menu">
    <li><a href="#">Dompteurs</a></li>
    <li><a href="#">Zoos</a></li>
    <li><a href="#">Chasseurs</a></li>
  </ul>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
  $('h1').mouseover(function() {
    $(this).dropdown('toggle');
  });
</script>
OUverture du menu au sruvol
OUverture du menu au survol

Il a fallu ajouter un peu de Javascript pour gérer l'événement correspondant et utiliser l'unique méthodedropdowndu plugin. Remarquez que le plugin a encore besoin de l'attributdata-toggle="dropdown" pour fonctionner correctement.

Les événements

Vous disposez également de 4 événements pour ce composant :

Événement

Description

show.bs.dropdown

Se déclenche dès l'appel à la méthode show

shown.bs.dropdown

Se déclenche lorsque le menu devient visible

hide.bs.dropdown

Se déclenche dès l'appel à la méthode hide

hidden.bs.dropdown

Se déclenche lorsque le menu est masqué

L'utilité de ces événements ne saute pas spontanément aux yeux. Si vous en avez néanmoins besoin la syntaxe est celle-ci :

$('#mon_dropdown').on('shown.bs.dropdown', function () {
  // Je fais un truc quand le menu est devenu visible
})

Fenêtre modale

Un premier exemple simple

La mise en place d'une fenêtre modale nécessite l'utilisation de quelques classes. Voici un premier exemple :

<button data-toggle="modal" href="#infos" class="btn btn-primary">Informations</button>
<div class="modal" id="infos">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h4 class="modal-title">Plus d'informations</h4>
      </div>
      <div class="modal-body">
        Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés...
      </div>
    </div>
  </div>
</div>

Le principe est simple : on crée un<div>englobant avec la classemodal, qui se charge de configurer et positionner la fenêtre. On crée un second<div>englobant avec la classemodal-dialog. On peut ensuite organiser la fenêtre avec une classe englobantemodal-content, un en-tête grâce à la classemodal-header et un corps avecmodal-body. On prévoit également une action pour fermer la fenêtre avec un bouton et la classeclose, et la propriétédata-dismiss="modal". Il ne reste plus qu'à créer un bouton pour ouvrir la fenêtre en faisant correspondre bouton et fenêtre avec un identifiant, et en utilisantdata-toggle="modal" pour que le plugin fonctionne. Au départ, on n'a donc que le bouton de la figure suivante à l'écran.

Bouton de commande
Bouton de commande

Et quand on clique, on obtient la fenêtre modale et le fond devient gris, comme à la figure suivante.

Fenêtre modale sur fond gris
Fenêtre modale sur fond gris

Tester

On a une petite croix pour fermer la fenêtre.

Un pied de page

On peut améliorer un peu l'esthétique en créant un pied de page avec la classemodal-footeret un bouton pour sortir, comme à la figure suivante.

<button data-toggle="modal" href="#infos" class="btn btn-primary">Informations</button>
<div class="modal" id="infos">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h4 class="modal-title">Plus d'informations</h4>
      </div>
      <div class="modal-body">
        Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés...
      </div>
      <div class="modal-footer">
        <button class="btn btn-info" data-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>
Pied de page dans une fenêtre modale
Pied de page dans une fenêtre modale

Une transition

Il est possible également d'obtenir un effet de transition en ajoutant la classefade, comme à la figure suivante :

<div class="modal fade" id="infos">
Effet de transition pour une fenêtre modale
Effet de transition pour une fenêtre modale

Tester

Garder le fond de l'écran

Si vous désirez conserver l'aspect normal de la fenêtre de fond, il faut renseigner l'optionbackdrop qui est vraie par défaut (voir figure suivante) :

<button data-toggle="modal" data-backdrop="false" href="#infos" class="btn btn-primary">Informations</button>
Fenêtre modale avec fond d'écran conservé
Fenêtre modale avec fond d'écran conservé

Tester

Injecter une page HTML

Il est possible d'injecter une page HTML dans le corps de la fenêtre modale, mais il faut que cette page ait été pensée pour cela. Vous en verrez un exemple à la figure suivante :

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body { padding-top: 20px; }
    </style>
  </head>
  <body>
    <div class="container">      
      <button data-toggle="modal" href="remote.html" data-target="#infos" class="btn btn-primary">
        informations
      </button>
      <div class="modal fade" id="infos">
        <div class="modal-dialog">  
          <div class="modal-content"></div>  
        </div> 
      </div>
      </div>
    </div>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
  </body>
</html>

Le bouton comporte l'adresse de la page à charger avec l'attributhref. On se contente de prévoir le contenant avec la classemodal-content. Quand on clique sur le bouton, jQuery charge la page ciblée et l'injecte dans la<div>qui comporte la classemodal-content.

Voici le code de la page à charger :

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">&times;</button>
  <h1>Mon amour pour les tigres</h1>
</div>
<div class="modal-body">
  <p>
    Je suis passionné par les <strong>tigres</strong> depuis très longtemps. Ce site a été construit en <em> 
 hommage à ces merveilleux félins...</em><br>
    Je fais partie de la <abbr title="Société des Amoureux des Tigres">SAT</abbr> qui a pour but de faire
 connaître ces splendides animaux. 
  </p>
  <p>Voici ce qu'en dit le wikipedia :</p>
  <blockquote>
    Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés (Felidae) du genre Panthera.
 Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus
 grands carnivores du monde. L'espèce est divisée en neuf sous-espèces possédant des différences mineures en termes
 de taille ou de comportement. Superprédateur, il chasse principalement les cerfs et les sangliers, bien qu'il
 puisse s'attaquer à des proies de taille plus importante comme les buffles. Jusqu'au XIXe siècle, le Tigre était
 réputé mangeur d'homme. La structure sociale des tigres en fait un animal solitaire ; le mâle possède un territoire
 qui englobe les domaines de plusieurs femelles et ne participe pas à l'éducation des petits.<br>
    <small class="pull-right">Wikipedia</small><br>
  </blockquote>
</div>

Il faut prévoir les classes pour faire bien apparaître la fenêtre modale. Voici le résultat :

Une page HTML dans une fenêtre modale
Une page HTML dans une fenêtre modale

Tester

Mon exemple tel qu'il est traité ne présente pas un grand intérêt, autant prévoir le code directement dans la page de base. En revanche, cela peut devenir intéressant dans le cas où plusieurs contenus sont disponibles. Vous en verrez un exemple à la figure suivante :

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body { padding-top: 20px; }
    </style>
  </head>
  <body>
    <div class="container">  
      <div class="btn-group">
        <button id="page1" type="button" class="btn btn-primary">Page 1</button>
        <button id="page2" type="button" class="btn btn-primary">Page 2</button>
        <button id="page3" type="button" class="btn btn-primary">Page 3</button>
      </div>
      <div class="modal fade" id="infos">
        <div class="modal-dialog">  
          <div class="modal-content"></div>  
        </div> 
      </div>
    </div>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script>
      $("body").on("hidden.bs.modal", ".modal", function () {
          $(this).removeData("bs.modal");
      });
      $("#page1").click(function() { 
        $("#infos").modal({ remote: "remote1.html" } ,"show");
      });
      $("#page2").click(function() { 
        $("#infos").modal({ remote: "remote2.html" }, "show");
      });
      $("#page3").click(function() { 
        $("#infos").modal({ remote: "remote3.html" }, "show");
      });
    </script>
  </body>
</html>
Fenêtres modales commandées par des boutons
Fenêtres modales commandées par des boutons

Tester

Notez l'utilisation de l'événementhidden.bs.modal qui survient à la fermeture de la fenêtre modale. Il est nécessaire de réinitialiser la fenêtre sinon on ouvre toujours la même…

Largeur de la fenêtre modale

La version 3.1 de Bootstrap a ajouté la possibilité de choisir la dimension d'une fenêtre modale avec 2 classes :modal-lgetmodal-sm. La première permet d'obtenir une fenêtre large, alors que la seconde fait l'inverse en créant une fenêtre étroite. Ces classes doivent aller avec la classemodal-dialog. Vous en trouverez un exemple à la figure suivante :

<div class="container">  
  <button class="btn btn-primary" data-toggle="modal" data-target="#f1">Grande fenêtre</button>
  <div class="modal fade" id="f1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">
          Je suis une grande fenêtre !
          <button type="button" class="close" data-dismiss="modal">x</button>
        </div>
      </div>
    </div>
  </div>
  <button class="btn btn-primary" data-toggle="modal" data-target="#f2">Petite fenêtre</button>
  <div class="modal fade" id="f2">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-body">
          Je suis une petite fenêtre !
          <button type="button" class="close" data-dismiss="modal">x</button>
        </div>
      </div>
    </div>
  </div>
</div>
Petite fenêtre avec la classe modal-sm
Petite fenêtre avec la classe modal-sm
Grande fenêtre avec la classe modal-lg
Grande fenêtre avec la classe modal-lg

La page d'exemple et l'accessibilité

Une fenêtre modale a été ajoutée à la page d'exemple. Pour ne pas trop alourdir cette page, j'ai juste prévu une fenêtre qui s'ouvre quand on clique sur le lien "Tigre de Sibérie", comme à la figure suivante.

Fenêtre modale dans la page d'exemple
Fenêtre modale dans la page d'exemple

Tester

Voici le code correspondant :

<a href="#infos" class="list-group-item" data-toggle="modal">
  Tigre de Sibérie
  <span class="badge">120</span>
</a>
<div class="modal fade" id="infos" role="dialog" aria-labelledby="modalTitre" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h4 id="modalTitre" class="modal-title">Plus d'informations sur le tigre de Sibérie</h4>
      </div>
      <div class="modal-body">
        <blockquote>
          Les tigres de Sibérie pèsent de 180 à 350 kg pour les mâles et de 100 à 200 kg pour les femelles. 
Le plus gros tigre de Sibérie, tué en 1950, atteignait les 384 kg. Le Tigre de Sibérie est le troisième plus 
gros prédateur terrestre derrière l'ours kodiak et l'ours polaire. La longueur totale du corps avec la queue 
est comprise entre 2,7 et 3,8 m pour les mâles et entre 2,4 et 2,75 m pour les femelles. La longueur du crâne 
est de 341 à 383 mm pour les mâles et 279 à 318 mm pour les femelles.<hr>
          <small class="pull-right">Wikipedia</small>
        </blockquote>
      </div>
    </div>
  </div>
</div>

J'ai intégré le code ARIA pour l'accessibilité. Le rôle a été défini commedialog(définition du W3C), c'est ce qui est préconisé par les auteurs de Bootstrap. Si on lit la définition, on parle de fenêtre qui interrompt le flux normal et qui requiert une entrée de l'utilisateur (ce qui n'est pas le cas ici). J'avoue ne m'être jamais vraiment inquiété de cet aspect d'accessibilité et la lecture de la préconisation W3C est quelque peu laborieuse. Il me semble toutefois judicieux de prendre en compte les besoins des personnes présentant un déficit sensoriel. En parcourant les rôles, j'aurais plutôt eu tendance à utiliser complémentary dans le cas présent.

La propriété aria-labelledby fait référence au titre de la fenêtre modale. Par exemple, un lecteur d’écran va lire le texte correspondant pour renseigner l'utilisateur sur le contenu de la fenêtre modale. Enfin la propriété aria-hidden indique de ne pas tenir compte de l'élément. Évidemment, ces ajouts d'accessibilité n'ont vraiment de sens que si toute la page est traitée de cette façon…

Un formulaire dans la fenêtre

Il est tout à fait possible d'avoir des éléments interactifs au niveau de la fenêtre modale comme par exemple un formulaire. Voici un exemple de mise en oeuvre :

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {padding-top: 20px;}
    </style>
  </head>
  <body>
    <div class="container">      
      <div id="html">
        <button data-toggle="modal" data-backdrop="false" href="#formulaire" class="btn btn-primary">Informations</button>
      </div>
      <div class="modal fade" id="formulaire">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">x</button>
              <h4 class="modal-title">Vos infos :</h4>
            </div>
            <div class="modal-body">
              <form action="test.php">
                <div class="form-group">
                  <label for="nom">Nom</label>
                  <input type="text" class="form-control" name ="nom" id="nom" placeholder="Votre nom">
                </div>
                <div class="form-group">
                  <label for="email">Email</label>
                  <input type="email" class="form-control" name="email" id="email" placeholder="Votre Email">
                </div>
                <button type="submit" class="btn btn-default">Envoyer</button>
              </form>
            </div>
            <div class="modal-footer">
              <button class="btn btn-info" data-dismiss="modal">Annuler</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script>
      $(function(){
        $("form").submit(function(e) {
          e.preventDefault();
          var $form = $(this);
          $.post($form.attr("action"), $form.serialize())
          .done(function(data) {
            $("#html").html(data);
            $("#formulaire").modal("hide"); 
          })
          .fail(function() {
            alert("ça marche pas...");
          });
        });
      });
    </script>
  </body>
</html>

Au départ on a juste un bouton :

Le bouton de commande
Le bouton de commande

La fenêtre apparaît au clic comme on l'a déjà vu précédemment :

 

La fenêtre avec le formulaire

Le traitement du formulaire va se faire en Ajax, de cette façon il est facile de gérer la validation (ce que je ne fais pas dans cet exemple pour ne pas alourdir le code). Il nous faut un petit fichier PHP (test.php ) pour gérer le traitement du formulaire :

<?php
echo("Le nom est " . $_POST['nom'] . " et l'Email est " . $_POST['email'] . ".");
?>

Je me contente de mettre en forme les deux informations transmises et de renvoyer le tout. Ensuite j'affiche la phrase sur la page après avoir effacé la fenêtre modale :

Le nom est Dupont et l'Email est dupont@pacher.fr.

Tester

Activation avec Javascript

Déclenchement de la fenêtre modale

On a vu que l'on peut pratiquement tout faire avec des propriétés, mais vous avez aussi la possibilité d'utiliser Javascript pour utiliser ce plugin. La propriétédata-toggle="modal" placée dans l'élément déclencheur active automatiquement le plugin. Reprenons un exemple vu ci-dessus en n’utilisant plus cette propriété :

<button class="btn btn-primary">Informations</button>
<div class="modal" id="infos">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h4 class="modal-title">Plus d'informations</h4>
      </div>
      <div class="modal-body">
        Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés...
      </div>
      <div class="modal-footer">
        <button class="btn btn-info" data-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>

Maintenant lorsqu'on clique sur le bouton, il ne se passe plus rien. Pour activer le plugin, il faut utiliser du Javascript :

$('.btn').click(function() {
  $('.modal').modal('show');
});

On peut aussi modifier le comportement de la fenêtre avec des propriétés. Par exemple, la propriété booléennekeyboard, qui est normalement vraie, permet de fermer la fenêtre par action sur la touche d'échappement. On peut la renseigner en complétant notre exemple. Mais il faut aussi renseigner la propriétéshowqui est vraie par défaut, et ouvre la fenêtre dès le chargement de la page, ce que l'on ne désire évidemment pas. Voici le code correspondant :

$('.modal').modal({
  keyboard: false,
  show: false
});
Les événements

Vous disposez également de 5 événements pour ce composant :

Événement Description

show.bs.modal

Se déclenche dès l'appel à la méthode show

shown.bs.modal

Se déclenche lorsque la fenêtre devient visible

hide.bs.modal

Se déclenche dès l'appel à la méthode hide

hidden.bs.modal

Se déclenche lorsque la fenêtre est masquée

loaded.bs.modal

Se déclenche lorsque la fenêtre a chargé le contenu récupéré avec la propriétéremote

Vous avez par exemple un formulaire sur la page modale comme on l'a vu ci-dessus et vous désirez que le premier contrôle soit actif à l'affichage de la page, vous pouvez le réaliser facilement ainsi :

$(".modal").on('shown.bs.modal', function(){
  $('input:first').focus();
});

Onglets

Un premier exemple simple

Le plugin Tab permet de créer facilement des onglets, comme à la figure suivante.

<ul class="nav nav-tabs">
    <li class="active"><a href="#accueil" data-toggle="tab">Accueil</a></li>
    <li><a href="#livres" data-toggle="tab">Livres</a></li>
    <li><a href="#temoignages" data-toggle="tab">Témoignages</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="accueil">Texte d'accueil</div>
    <div class="tab-pane" id="livres">Tous les livres</div>
    <div class="tab-pane" id="temoignages">Tous les temoignages</div>
</div>
Onglets simples
Onglets simples

On utilise une liste et quelques classes, rien de bien compliqué. Les classesnavetnav-tabs'occupent de la mise en forme. Le plugin est activé pardata-toggle="tab". On pointe le bon contenu avechref.

Un autre aspect

Si cette apparence tabulaire ne vous convient pas, vous pouvez changer pour un autre aspect avec une modification minime, comme à la figure suivante.

<ul class="nav nav-pills">
Onglets stylisés
Onglets stylisés

Transition progressive

Pour obtenir un effet progressif, il suffit d'ajouter la classefadepour chacun destab-pane:

<ul class="nav nav-pills">
    <li class="active"><a href="#accueil" data-toggle="tab">Accueil</a></li>
    <li><a href="#livres" data-toggle="tab">Livres</a></li>
    <li><a href="#temoignages" data-toggle="tab">Témoignages</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade active in" id="accueil">Texte d'accueil</div>
    <div class="tab-pane fade" id="livres">Tous les livres</div>
    <div class="tab-pane fade" id="temoignages">Tous les témoignages</div>
</div>

Il faut ajouter aussi la classeinpour letab-paneactif pour faire apparaître le texte (opacity à 1) au chargement de la page.

Empilage

Si ça ne vous convient encore pas (mais vous êtes difficile là :p ), vous pouvez empiler les liens (voir figure suivante) :

<ul class="nav nav-pills nav-stacked">
Onglets empilés
Onglets empilés

Justification

Il est aussi possible de faire en sorte que les onglets occupent tout l'espace disponible en se répartissant de façon homogène (voir figure suivante).

<div class="col-lg-8">    
  <ul class="nav nav-pills nav-justified">
      <li class="active"><a href="#accueil" data-toggle="tab">Accueil</a></li>
      <li><a href="#livres" data-toggle="tab">Livres</a></li>
      <li><a href="#temoignages" data-toggle="tab">Témoignages</a></li>
  </ul>
  <div class="tab-content">
      <div class="tab-pane active" id="accueil">Texte d'accueil</div>
      <div class="tab-pane" id="livres">Tous les livres</div>
      <div class="tab-pane" id="temoignages">Tous les témoignages</div>
  </div>
</div>
Onglets justifiés
Onglets justifiés

Désactiver un lien

Vous pouvez marquer un lien comme inactif avec la classedisabled, comme à la figure suivante :

<ul class="nav nav-pills">
    <li class="active"><a href="#accueil" data-toggle="tab">Accueil</a></li>
    <li class="disabled"><a href="#livres" data-toggle="tab">Livres</a></li>
    <li><a href="#temoignages" data-toggle="tab">Témoignages</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="accueil">Texte d'accueil</div>
    <div class="tab-pane" id="livres">Tous les livres</div>
    <div class="tab-pane" id="temoignages">Tous les témoignages</div>
</div>
Un onglet désactivé
Un onglet désactivé

Mais ce n'est pas parce qu'il apparaît comme inactif qu'il l'est vraiment ! Pour le rendre réellement inactif, il faut supprimer la propriétédata-toggle:

<li class="disabled"><a href="#livres">Livres</a></li>

Un menu déroulant dans un onglet

Pour avoir un menu déroulant sur un onglet, il faut utiliser le plugindropdownque nous avons déjà vu (comme à la figure suivante) :

<ul class="nav nav-tabs">
  <li><a href="#accueil" data-toggle="tab">Accueil</a></li>
  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Livres <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#policiers" data-toggle="tab">Policiers</a></li>
      <li><a href="#romans" data-toggle="tab">Romans</a></li>
      <li><a href="#contes" data-toggle="tab">Contes</a></li>
    </ul>
  </li>
  <li><a href="#temoignages" data-toggle="tab">Témoignages</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="accueil">Texte d'accueil</div>
    <div class="tab-pane" id="temoignages">Tous les témoignages</div>
    <div class="tab-pane" id="policiers">Tous les livres policiers</div>
    <div class="tab-pane" id="romans">Tous les romans</div>
    <div class="tab-pane" id="contes">Tous les contes</div>
</div>
Menu déroulant dans un onglet
Menu déroulant dans un onglet

Onglets latéraux

Vous pouvez adapter la disposition et mettre par exemple les onglets empilés à gauche, comme à la figure suivante :

<ul class="nav nav-pills nav-stacked pull-left">
  <li><a href="#accueil" data-toggle="tab">Accueil</a></li>
  <li class="active"><a href="#livres" data-toggle="tab">Livres</a></li>
  <li><a href="#temoignages" data-toggle="tab">Témoignages</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane" id="accueil">Texte d'accueil</div>
    <div class="tab-pane" id="temoignages">Tous les témoignages</div>
    <div class="tab-pane active" id="livres">Tous les livres</div>
</div>
Onglets à gauche
Onglets à gauche

Ou à droite (voir figure suivante) :

<ul class="nav nav-pills nav-stacked pull-right">
Onglets à droite
Onglets à droite

La page d'exemple

Notre page d'exemple est maintenant enrichie d'onglets dans la partie inférieure, comme à la figure suivante.

Onglets dans la page d'exemple
Onglets dans la page d'exemple

Tester

Voici la partie du code concernée :

<section class="col-sm-8">
  <ul class="nav nav-pills">
    <li class="active"><a href="#contact" data-toggle="tab">Contact</a></li>
    <li><a href="#informations" data-toggle="tab">Informations pratiques</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active fade in" id="contact">
      <form class="well" role="form">
        <h4><span class="label label-default">Si vous voulez me laisser un message</span></h4>
        <h4>Comment m'avez-vous trouvé ?</h4>
        <fieldset>
          <div class="radio">
            <label for="ami" class="radio">
              <input type="radio" name="origine" value="ami" id="ami">
              Par un ami 
            </label>
          </div>
          <div class="radio">
            <label for="web" class="radio">
              <input type="radio" name="origine" value="web" id="web">
              Sur le web 
            </label>
          </div>
          <div class="radio">
            <label for="hasard" class="radio">
              <input type="radio" name="origine" value="hasard" id="hasard">
              Par hasard 
            </label>
          </div>
          <div class="radio">
            <label for="autre" class="radio">
              <input type="radio" name="origine" value="autre" id="autre">
              Autre... 
            </label>
          </div>
          <label for="textarea">Votre message :</label>
            <textarea id="textarea" class="form-control" rows="4"></textarea>
            <p class="help-block">Vous pouvez agrandir la fenêtre</p>
            <button class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-ok-sign"></span> Envoyer</button>
        </fieldset>
      </form>
    </div>
    <div class="tab-pane fade" id="informations">
      <div class="well">
        <h2>Informations pratiques</h2>
        <p>Si vous êtes intéressés par la protection des tigres et si vous désirez prendre part aux actions menées... blablabla...</p>
      </div>
    </div>
  <div class="tab-content">
</section>

Utilisation de Javascript

Activation des onglets

Nous avons ci-dessus activé le plugin avec la propriétédata-toggle="tab". Il est aussi possible d'utiliser le plugin directement avec du Javascript. Voici un des exemples sans la propriété renseignée :

<ul class="nav nav-pills nav-stacked pull-right">
  <li><a href="#accueil">Accueil</a></li>
  <li class="active"><a href="#livres">Livres</a></li>
  <li><a href="#temoignages">Témoignages</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane" id="accueil">Texte d'accueil</div>
    <div class="tab-pane" id="temoignages">Tous les témoignages</div>
    <div class="tab-pane active" id="livres">Tous les livres</div>
</div>

Les onglets sont devenus inactifs. Pour que ça fonctionne il faut ajouter un peu de Javascript :

$('a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

Tous les onglets doivent être activés, c'est pour cette raison que j'ai choisi pour ma page le sélecteur'a'qui est sans ambiguïté.

Les événements

Vous disposez également de 4 événements pour ce composant :

Événement

Description

show.bs.tab

Se déclenche dès l'appel à la méthode show

shown.bs.tab

Se déclenche lorsque l'onglet devient visible

hide.bs.tab

Se déclenche lorsqu'un onglet va devenir invisible

hidden.bs.tab

Se déclenche lorsqu'un onglet est devenu invisible

D'autre part il est possible de connaître l'onglet actif avecevent.targetet l'onglet précédemment sélectionné avecevent.relatedTarget. On va utiliser tout cela pour afficher le nom de l'onglet actuel et du précédent à chaque changement. On va donc ajouter le code HTML pour accueillir l'information :

<ul class="nav nav-pills">
    <li class="active"><a href="#accueil">Accueil</a></li>
    <li><a href="#livres">Livres</a></li>
    <li><a href="#temoignages">Témoignages</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="accueil">Texte d'accueil</div>
    <div class="tab-pane" id="livres">Tous les livres</div>
    <div class="tab-pane" id="temoignages">Tous les témoignages</div>
</div>
<hr>
<p id='actif'><strong>Onglet actif </strong>: <span></span></p>
<p id='precedent'><strong>Onglet précédent </strong>: <span></span></p>

Il ne reste plus qu'à prévoir le code Javascript pour déclencher le plugin et mettre en place l'écoute de l'événement et agir en conséquence (voir figure suivant) :

$(function(){
  $('a')
  .click(function (e) {
    e.preventDefault();
    $(this).tab('show');
  })
  .on('shown.bs.tab', function (e) {
    $('#actif span').html($(e.target).text());
    $('#precedent span').html($(e.relatedTarget).text());
  });
});
Utilisation de l'événement shown.bs.tab
Utilisation de l'événement shown.bs.tab

Tester

Boutons

Bouton bascule

On a parfois besoin de boutons à 2 états stabilisés : repos et appuyé. Le plugin permet de réaliser cela facilement. Il suffit de créer le bouton en prévoyantdata-toggle="button"(comme à la figure suivante) :

<a class="btn btn-success" data-toggle="button">Simple Bascule</a>
Bouton bascule
Bouton bascule

Boutons effet "checkbox"

On peut grouper des boutons avec la classebtn-groupet les faire fonctionner comme descheckboxavecdata-toggle="buttons". Les boutons restent indépendants dans leur fonctionnement mais ont l'avantage d'être groupés. Pour réaliser cela, il faut utiliser des contrôlesinputde typecheckbox(voir figure suivante) :

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-success">
    <input type="checkbox">Un
  </label>
  <label class="btn btn-success">
    <input type="checkbox">Deux
  </label>
  <label class="btn btn-success">
    <input type="checkbox">Trois
  </label>
</div>
Boutons avec effet checkbox
Boutons avec effet checkbox

Boutons effet "radio"

On peut grouper des boutons avec la classebtn-groupet les faire fonctionner comme desboutons radioavecdata-toggle="buttons". Les boutons sont maintenant liés dans leur fonctionnement, un seul peut être enfoncé. Pour réaliser cela, il faut utiliser des contrôlesinputde typeradio(voir figure suivante) :

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-success">
    <input type="radio">Un
  </label>
  <label class="btn btn-success">
    <input type="radio">Deux
  </label>
  <label class="btn btn-success">
    <input type="radio">Trois
  </label>
</div>
Boutons avec effet radio
Boutons avec effet radio

Boutons pour attente de processus

Parfois on clique sur un bouton pour réaliser un processus qui demande un certain temps, comme par exemple un envoi de fichier. Le plugin prévoit cette possibilité. Voici un premier exemple avec une temporisation artificielle juste pour marquer l'effet.
D'abord on crée le bouton :

<a class="btn btn-primary" data-loading-text="Chargement...">Cliquez !</a>

Ensuite, on crée le code pour gérer l'effet. La méthodeloadingprovoque le changement du texte du bouton avec ce qui est indiqué dansdata-loading-textet la méthoderesetramène le bouton à son état initial (voir figure suivante):

$(function (){
  $('a').click(function () {
    with($(this)) {
      button('loading');
      setTimeout(function () {
        button('reset');
      }, 4000);
    }
  })
});
Bouton pour attente de fin d'un processus
Bouton pour attente de fin d'un processus

Tester

Maintenant voyons un cas d'utilisation un peu plus réaliste que notre minuterie. Nous avons une image lourde à charger, et nous voulons que le bouton change d'état le temps de chargement de l'image. Voilà le bouton et la balise prête à recevoir l'image :

<a class="btn btn-primary" data-loading-text="Chargement en cours...">Chargez l'image !</a>
<img id="mon_image">

Et voici le code Javascript pour gérer l'effet :

$(function (){
  $('a').click(function() {
    with($(this)) {
      if(hasClass('btn-primary')) {
        removeClass('btn-primary').addClass('btn-danger').button('loading');
        var image = new Image();
        image.onload = function() {
          removeClass('btn-danger').addClass('btn-primary').button('reset');
          $("#mon_image").attr({ src:"images/legumes.jpg" });
        };
        image.src = "images/legumes.jpg"; 
      }
    }
  })
});

Tester

Avec cet exemple, vous ne verrez certainement l'effet qu'une fois dans votre navigateur, étant donné qu'ensuite l'image sera en cache.

La page d'exemple

La page d'exemple a été agrémentée de boutons groupés de type "radio" pour choisir une vidéo (voir la figure suivante).

Boutons avec effet option dans la page d'exemple
Boutons avec effet option dans la page d'exemple

Tester

<div class="btn-group pull-right" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio">Vidéo 1
  </label>
  <label class="btn btn-primary">
    <input type="radio">Vidéo 2
  </label>
  <label class="btn btn-primary">
    <input type="radio">Vidéo 3
  </label>
</div>

Carrousel

La page d'exemple

La page d'exemple comporte un carrousel (voir la figure suivante). Pour information, ce terme prend un R en anglais et deux en français.

Carrousel dans la page d'exemple
Carrousel dans la page d'exemple

Tester

Un premier exemple simple

Ce plugin permet de créer facilement un carrousel. La mise en place nécessite l'utilisation de quelques classes. Voici la structure de base HTML :

<div class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
       <div class="item active"> ... </div>
       <div class="item"> ... </div>
       <div class="item"> ... </div>
   </div>
</div>

Voici un premier exemple simple :

<div class="container">
  <div class="col-lg-offset-2 col-lg-8">
    <div class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="item active"> <img alt="" src="images/img47.png"></div>
        <div class="item"> <img alt="" src="images/img48.png"></div>
        <div class="item"> <img alt="" src="images/img49.png"></div>
      </div>
    </div>
  </div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>

Pour chaque item on place une balise<img>pour référencer une image. On utilise la classeactivepour désigner l'image qui doit apparaître en premier. J'ai utilisé une classecol-lg-8pour calibrer le carrousel et une classecol-lg-offset-2pour le centrer. Les 3 images sont aux mêmes dimensions. Il nous faut aussi initialiser le carrousel avecdata-ride="carousel". Par défaut les images défilent au rythme de 5s (voir figure suivante) :

Un carrousel simple
Un carrousel simple

Tester

Des titres pour les images

Il est possible de faire apparaître un titre pour chaque image dans la partie inférieure avec la classecarousel-caption(voir figure suivante) :

<div class="col-lg-offset-2 col-lg-8">
  <div class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="item active"> <img alt="" src="images/img47.png">
        <h1 class="carousel-caption">Une présentation</h1>
      </div>
      <div class="item"> <img alt="" src="images/img48.png">
        <h1 class="carousel-caption">Une autre présentation</h1>
      </div>
      <div class="item"> <img alt="" src="images/img49.png">
        <h1 class="carousel-caption">Et encore une autre !</h1p>
      </div>
    </div>
  </div>
</div>
Des titres dans les images
Des titres dans les images

Tester

Un indicateur de l'image affichée

Il est possible de faire apparaître un indicateur pour savoir quelle image est affichée et aussi pour accéder directement à une image particulière. Il faut identifier le carrousel et le pointer avec l'attributdata-target. L'attributdata-slide-topermet d'identifier la diapositive concernée. On peut aussi sélectionner la diapositive à afficher en cliquant sur l'indicateur (voir figure suivante) :

<div id="carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active"> <img alt="" src="images/img47.png"></div>
    <div class="item"> <img alt="" src="images/img48.png"></div>
    <div class="item"> <img alt="" src="images/img49.png"></div>
  </div>
</div>
Un indicateur de l'image affichée
Un indicateur de l'image affichée

Tester

Des boutons de défilement

On peut aussi afficher des boutons à droite et à gauche pour permettre un défilement manuel des images. Il faut identifier le carrousel pour le référencer dans les liens avechref(voir figure suivante) :

<div id="carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active"> <img alt="" src="images/img47.png"></div>
    <div class="item"> <img alt="" src="images/img48.png"></div>
    <div class="item"> <img alt="" src="images/img49.png"></div>
  </div>
  <a class="left carousel-control" href="#carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
Des boutons pour le défilement des images

Tester

Améliorer la présentation

On peut améliorer la présentation du diaporama avec du style, comme à la figure suivante :

.carousel-inner {
    border: 5px solid white;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
Amélioration de la présentation

Mais on peut aussi utiliser une classe de Bootstrap pour obtenir un effet sympathique sans ajouter de style (voir figure suivante) :

<div class="carousel-inner thumbnail">
Utilisation de la classe thumbnail pour la présentation
Utilisation de la classe thumbnail pour la présentation

Les options du carrousel

Délai de défilement

Dans les exemples précédents on a lancé le carrousel avec  data-ride="carousel". Si on veut changer un peu le fonctionnement de base il faut le lancer de façon explicite à partir du Javascript. Par exemple ici pour changer la vitesse de défilement :

$(function () {
  $('.carousel').carousel({ interval: 2000 });
});

Testez

Cycle et pause

On peut avec jQuery commander le démarrage du cycle ou la pause (voir figure suivante) :

<div class="container">
  <div class="col-lg-2">
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary active" id="cycle">
        <input type="radio" name="options">Cycle
      </label>
      <label class="btn btn-primary" id="pause">
        <input type="radio" name="options">Pause
      </label>
    </div>
  </div>
  <div class="col-lg-8">
    <div id="carousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="item active"> <img alt="" src="images/img47.png"></div>
        <div class="item"> <img alt="" src="images/img48.png"></div>
        <div class="item"> <img alt="" src="images/img49.png"></div>
      </div>
    </div>
  </div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
  $(function () {
    $('.carousel').carousel({ interval: 2000 });
    $('#cycle').click(function() {
      $('.carousel').carousel('cycle');
    });
    $('#pause').click(function() {
      $('.carousel').carousel('pause');
    });
  });
</script>
Commande du carrousel avec des boutons
Commande du carrousel avec des boutons

Tester

Les deux boutons commandent le diaporama. Une bonne occasion pour revoir comment configurer des boutons de type "radio" avec Bootstrap ;) .

Autres commandes

Voici maintenant un exemple plus complet avec une palette de boutons de commande (voir figure suivante) :

<div class="container">
  <div class="row">
    <div class="col-lg-offset-2 col-lg-8">
      <div id="carousel" class="carousel slide">
        <div class="carousel-inner">
          <div class="item active"> <img alt="" src="images/img47.png"></div>
          <div class="item"> <img alt="" src="images/img48.png"></div>
          <div class="item"> <img alt="" src="images/img49.png"></div>
        </div>
      </div>
    </div>  
  </div>  
  <div class="row">
    <div class="col-lg-12">  
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-success" id="first">
          <input type="radio" name="options"><span class="glyphicon glyphicon-fast-backward"></span>
        </label>
        <label class="btn btn-success" id="previous">
          <input type="radio" name="options"><span class="glyphicon glyphicon-step-backward"></span>
        </label>
        <label class="btn btn-success" id="pause">
          <input type="radio" name="options"><span class="glyphicon glyphicon-pause"></span>
        </label>
        <label class="btn btn-success active" id="play">
          <input type="radio" name="options"><span class="glyphicon glyphicon-play"></span>
        </label>
        <label class="btn btn-success" id="next">
          <input type="radio" name="options"><span class="glyphicon glyphicon-step-forward"></span>
        </label>
        <label class="btn btn-success" id="last">
          <input type="radio" name="options"><span class="glyphicon glyphicon-fast-forward"></span>
        </label>
      </div>  
    </div>
  </div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
  $(function () {
    $('.carousel').carousel({ interval: 2000 });
    $('#first').click(function() { $('.carousel').carousel(0); });
    $('#previous').click(function() { $('.carousel').carousel('prev'); }); 
    $('#pause').click(function() { $('.carousel').carousel('pause'); });
    $('#play').click(function() { $('.carousel').carousel('cycle'); });
    $('#next').click(function() { $('.carousel').carousel('next'); });
    $('#last').click(function() { $('.carousel').carousel(2); });
  });
</script>
Une barre de boutons pour la commande du carrousel
Une barre de boutons pour la commande du carrousel

Tester

Les événements

Vous disposez de 2 événements pour ce composant :

Événement

Description

slide.bs.carousel

Se déclenche dès l'appel à la méthode slide

slid.bs.carousel

Se déclenche lorsque la translation est terminée

Complétons l'exemple précédent en prévoyant l'affichage de l'index de la diapositive en cours ainsi que le nombre total de diapositives (voir figure suivante). Voici le code avec ce complément :

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body { padding-top: 20px; }
      .col-lg-offset-2 {margin-bottom: 10px; }
      .col-lg-12 { text-align: center; }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-offset-2 col-lg-8">
          <div id="carousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="item active"> <img alt="" src="images/img47.png"></div>
              <div class="item"> <img alt="" src="images/img48.png"></div>
              <div class="item"> <img alt="" src="images/img49.png"></div>
            </div>
          </div>
        </div>  
      </div>  
      <div class="row">
        <div class="col-lg-12">  
          <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-success" id="first">
              <input type="radio" name="options"><span class="glyphicon glyphicon-fast-backward"></span>
            </label>
            <label class="btn btn-success" id="previous">
              <input type="radio" name="options"><span class="glyphicon glyphicon-step-backward"></span>
            </label>
            <label class="btn btn-success" id="pause">
              <input type="radio" name="options"><span class="glyphicon glyphicon-pause"></span>
            </label>
            <label class="btn btn-success active" id="play">
              <input type="radio" name="options"><span class="glyphicon glyphicon-play"></span>
            </label>
            <label class="btn btn-success" id="next">
              <input type="radio" name="options"><span class="glyphicon glyphicon-step-forward"></span>
            </label>
            <label class="btn btn-success" id="last">
              <input type="radio" name="options"><span class="glyphicon glyphicon-fast-forward"></span>
            </label>
          </div>  
          <p><span class="label label-info"></span></p>
        </div>
      </div>
      
    </div>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script>
      function affichage() {
        var total = $('.item').length;
        var current = $('.item.active').index() + 1;
        $('.label').text(current + ' / '+ total);
      }
      $(function () {
        affichage();
        $('.carousel').carousel({ interval: 2000 });
        $('#first').click(function() { $('.carousel').carousel(0); });
        $('#previous').click(function() { $('.carousel').carousel('prev'); }); 
        $('#pause').click(function() { $('.carousel').carousel('pause'); });
        $('#play').click(function() { $('.carousel').carousel('cycle'); });
        $('#next').click(function() { $('.carousel').carousel('next'); });
        $('#last').click(function() { $('.carousel').carousel(2); });
        $('.carousel').on('slid.bs.carousel', function () {
          affichage();
        });
      });
    </script>
  </body>
</html>
Affichage de l'index et du nombre total de diapositives
Affichage de l'index et du nombre total de diapositives

Tester

Pour rester dans l'utilisation de Bootstrap, j'ai prévu l'affichage dans un badge. Pour déterminer le nombre de diapositives, on compte le nombre de fois où on trouve la classeitem. Pour la diapositive en cours, on recherche la classeactive.

Info-bulles et Popover

La page d'exemple

La page d'exemple est agrémentée d'infos-bulles (voir figure suivante).

Des infos-bulles dans la page d'exemple
Des infos-bulles dans la page d'exemple

Tester

Ces deux plugins (Info-bulles et Popover) partagent une bibliothèque et ont un fonctionnement analogue, nous allons donc les traiter ensemble.

Info-bulle

Un exemple simple

Le but est d'obtenir de jolies info-bulles, comme à la figure suivante.

Apparence d'une info-bulle
Apparence d'une info-bulle

Voici le code correspondant à ce premier exemple :

Le Tigre (Panthera tigris) est un <a data-toggle="tooltip" href="#" title="Classe de vertébrés">
mammifère</a> carnivore de la famille des félidés (Felidae) du genre Panthera. Aisément reconnaissable à sa 
fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus grands <a data-toggle="tooltip" 
href="#" title='Synonyme de "carnassier"'> carnivores</a> du monde. L'espèce est divisée en neuf 
sous-espèces possédant des différences mineures en termes de taille ou de comportement.

On utilise des balises<a>avec l'attributdata-toggleégal àtooltip. Le contenu de l'info-bulle se place dans l'attributtitle. Si vous testez ce code il ne se passera rien parce qu'il faut initialiser le plugin avec jQuery :

$(function (){
   $('a').tooltip();
});

Il suffit d'utiliser la fonctiontooltipavec le bon sélecteur, ici on a choisit la balise<a>parce qu'on veut une info-bulle sur tous les liens de la page. Dans un contexte plus complexe il faudrait évidemment affiner la sélection, mais ce n'est pas l'objet de ce cours.

Positionnement de l'info-bulle

On peut changer le positionnement de l'info-bulle qui par défaut se situe juste au-dessus avec l'optionplacement. Les possibilités sonttop(au-dessus, c'est l'option par défaut),bottom(au-dessous),left(à gauche) etright(à droite). Voici un exemple d'utilisation avec le même code HTML :

$(function (){
   $('a:first-child').tooltip({ placement:'left' });
   $('a:last-child').tooltip({ placement:'bottom' });
});

Ici on utilise l'optionplacementen la définissant àleftpour le premier lien etbottompour le second (voir figure suivante).

Info-bulle au-dessous
Info-bulle au-dessous
Déclenchement de l'info-bulle

Par défaut l'info-bulle est déclenchée lorsque le curseur de la souris se déplace sur l'élément concerné ou si celui-ci a le focus. On peut modifier ce comportement avec l'optiontrigger. Les possibilités sontclick,hover,focusetmanual. Voici un exemple d'utilisation avec le même code HTML :

$(function (){
   $('a:first-child').tooltip({ trigger:'click' });
   $('a:last-child').tooltip({ placement: 'bottom', trigger:'hover click' });
});

Ici on utilise l'optiontriggeren la définissant àclickpour le premier lien ethoveretclickpour le second (voir figure suivante).

Variété de déclenchement des info-bulles
Variété de déclenchement des info-bulles

Tester

Délai de déclenchement de l'info-bulle

Par défaut l'info-bulle s'affiche immédiatement et disparaît avec la même célérité. On peut modifier ce comportement avec l'optiondelay. On peut soit définir un délai identique pour l’apparition et la disparition, soit différencier les deux. Voici un exemple d'utilisation avec le même code HTML :

$(function (){
   $('a:first-child').tooltip({ delay: 400 });
   $('a:last-child').tooltip({ delay: { show: 400, hide: 200 } });
});

Ici on utilise l'optiondelayen la définissant à 400 ms pour le premier lien pour l'affichage et la disparition. On différencie avec 400 ms pour l'affichage et 200 ms pour la disparition pour le second (voir figure suivante).

Délai de déclenchement d'une info-bulle
Délai de déclenchement d'une info-bulle

Tester

Popover

Un exemple simple

Un popover est une grosse info-bulle. Le fonctionnement est identique à ce que nous avons vu précédemment. Voici un premier exemple de mise en œuvre au niveau HTML :

<a href="#" id="pop" class="btn btn-info" data-toggle="popover" data-content="C'est tout simple à faire !" title="Test du Popover">
Cliquez sur moi pour le popover</a>

On utilise des balises<a>avec l'attributdata-toggleégal àpopover. Le contenu se place dans l'attributdata-contentet le titre dans l'attributtitle. Si vous testez ce code, il ne se passera rien parce qu'il faut initialiser le plugin avec jQuery :

$(function (){
   $("#pop").popover(); 
});

Il suffit d'utiliser la fonctionpopoveravec le bon sélecteur, ici on a choisi tout simplement unid. Vous verrez le résultat à la figure suivante.

Popover déclenché par un bouton
Popover déclenché par un bouton
Fermeture sur clic

Par défaut pour refermer la fenêtre il faut cliquer à nouveau sur le déclencheur, ici le bouton. Si on veut une fermeture sur un clic ailleurs sur la page il faut ajouter le trigger focus :

<a href="#" id="pop" class="btn btn-info" data-toggle="popover" data-trigger="focus" data-content="C'est tout simple à faire !" 
title="Test du Popover">
Cliquez sur moi pour le Popover</a>

Ce qu'il est possible aussi de réaliser dans le Javascript :

$("#pop").popover({trigger: 'focus'});
Positionnement

Comme pour l'info-bulle on peut modifier le positionnement avec l'optionplacementavec les mêmes possibilitéstop(au-dessus, c'est l'option par défaut),bottom(au-dessous),left(à gauche) etright(à droite) (voir figure suivante) :

$("#pop").popover({placement:'left'});
Popover à gauche
Popover à gauche
Délai

On peut aussi définir un délai d'apparition et de disparition :

$("#pop").popover({delay: { show: 800, hide: 300 }});

Tester

Déclenchement

Le comportement par défaut est un déclenchement au clic sur l'élément, mais on peut facilement changer ce comportement :

$("#pop").popover({placement:'bottom', trigger:'hover'});

Ici on a utilisé l'optiontriggerpour avoir un déclenchement au passage (hover) sur l'élément (les autres possibilités sontclick,focusetmanual). On montre aussi qu'on peut cumuler plusieurs options puisqu'on a aussi défini le positionnement en bas avecbottom.

Tester

Avec l'optionmanualon peut définir une action quelconque pour déclencher le popover que l'on veut. Regardez cet exemple au niveau HTML :

<div class="well"> 
  <img id="img" data-toggle="popover" data-content="Je suis en colère !" title="Attention à vous !" src="images/visage.png"> 
  <a href="#" id="pop" class="btn btn-info pull-right" >Cliquer sur moi plusieurs fois pour le popover</a> 
</div>

Cette fois, on a défini le popover au niveau d'une image et on se propose de le déclencher à partir d'un bouton. Voici le code jQuery correspondant :

$("#img").popover({trigger:'manual'}); 
$("#pop").click(function() {
   $('#img').popover('toggle');
});

On initialise le popover sur l'image en déclenchement manuel :

$("#img").popover({trigger:'manual'});

 

On utilise l'événementclickdu bouton pour lancer la fonctionpopoveravectogglecomme paramètre :

$('#img').popover('toggle');

Vous verrez le résultat à la figure suivante.

Popover au niveau d'une image
Popover au niveau d'une image

Tester

Du HTML dans le popover

Par défaut, vous ne pouvez mettre que du simple texte dans le popover. Toutefois, vous pouvez mettre l'optionhtmlàtruepour changer ce fonctionnement (voir figure suivante) :

<a href="#" id="pop" class="btn btn-info" data-toggle="popover" data-html="true" data-content="<em>C'est tout simple à faire !</em>"
 title="<h3>Test du popover</h3>">
Cliquez sur moi pour le popover</a>
Du HTML dans un popover
Du HTML dans un popover

Effet accordéon

Un exemple simple

Le plugin accordéon (Collapse) est bien adapté au composantpanel, voici un premier exemple (voir figure suivante) :

<div class="panel panel-default col-lg-6">
  <h4> Les plugins de Bootstrap</h4>
  <div class="panel-heading"> 
    <a href="#item1" data-toggle="collapse"> Accordéon </a> 
  </div>
  <div id="item1" class="panel-collapse collapse in">
    <div class="panel-body"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div>
  </div>
  <div class="panel-heading"> 
    <a href="#item2" data-toggle="collapse"> Fenêtre modale </a> 
  </div>
  <div id="item2" class="panel-collapse collapse">
    <div class="panel-body"> Ce plugin permet de créer des fenêtres modales élégantes avec une grande simplicité. </div>
  </div>
  <div class="panel-heading"> 
    <a href="#item3" data-toggle="collapse"> Carousel </a> 
  </div>
  <div id="item3" class="panel-collapse collapse">
    <div class="panel-body"> Ce plugin permet de faire défiler des images ou des vidéo, ou tout autre élément média avec une mise 
en forme esthétique </div>
  </div>
  <br>
</div>
Effet accordéon

Tester

Il faut distinguer deux éléments :

  • Le déclencheur sur lequel on clique : ici c'est un lien avec une balise<a>. Il doit comporter la propriétédata-toggle="collapse"et évidemment la cible avechref

  • La zone à masquer ou à démasquer : elle est englobée avec un<div>équipé de la classecollapse.

Le lien entre le déclencheur et la zone se fait par l'identifiant de la zone. La classein permet de déterminer si une zone est affichée ou pas. Dans mon exemple, j'ai mis cette classe pour la première zone, celle-ci s'affiche donc dès le chargement. Si vous testez le composant, vous verrez qu'il se contente d'affecter cette classe. J'ai un peu triché avec l'utilisation du composantpanel...

Des bordures pour bien délimiter les éléments

Nous allons voir maintenant une utilisation plus complète du composantpanel(voir figure suivante):

<div class="panel-group col-lg-6">
    <h3> Les plugins de Bootstrap</h3>
    <div class="panel panel-default">
      <div class="panel-heading"> 
        <h3 class="panel-title">
          <a href="#item1" data-toggle="collapse"> Accordéon </a> 
        </h3>
      </div>
      <div id="item1" class="panel-collapse collapse in">
        <div class="panel-body"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading"> 
        <h3 class="panel-title">
          <a href="#item2" data-toggle="collapse"> Fenêtre modale </a> 
        </h3>
      </div>
      <div id="item2" class="panel-collapse collapse">
        <div class="panel-body"> Ce plugin permet de créer des fenêtres modales élégantes avec une grande simplicité. </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading"> 
        <h3 class="panel-title">
          <a href="#item3" data-toggle="collapse"> Carousel </a> 
        </h3>
      </div>
      <div id="item3" class="panel-collapse collapse">
        <div class="panel-body"> Ce plugin permet de faire défiler des images ou des vidéo, ou tout autre élément média avec une mise 
    en forme esthétique </div>
    </div>
  </div>
</div>
Des bordures pour distinguer les blocs
Des bordures pour distinguer les blocs

Maintenant les blocs sont bien distincts...

Tester

Afficher une seule zone

En général, lorsqu'on crée un effet accordéon, on veut que lorsqu'on affiche une zone, les autres s'effacent automatiquement. Voilà comment procéder (résultat à la figure suivante) :

<div class="container">
  <div id="monaccordeon" class="panel-group col-lg-6">
    <h3> Les plugins de Bootstrap</h3>
    <div class="panel panel-default">
      <div class="panel-heading"> 
        <h3 class="panel-title">
          <a href="#item1" data-parent="#monaccordeon" data-toggle="collapse"> Accordéon </a> 
        </h3>
      </div>
      <div id="item1" class="panel-collapse collapse in">
        <div class="panel-body"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading"> 
        <h3 class="panel-title">
          <a href="#item2" data-parent="#monaccordeon" data-toggle="collapse"> Fenêtre modale </a> 
        </h3>
      </div>
      <div id="item2" class="panel-collapse collapse">
        <div class="panel-body"> Ce plugin permet de créer des fenêtres modales élégantes avec une grande simplicité. </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading"> 
        <h3 class="panel-title">
          <a href="#item3" data-parent="#monaccordeon" data-toggle="collapse"> Carousel </a> 
        </h3>
      </div>
      <div id="item3" class="panel-collapse collapse">
        <div class="panel-body"> Ce plugin permet de faire défiler des images ou des vidéo, ou tout autre élément média avec une mise en forme esthétique </div>
      </div>
    </div>
  </div>
</div>

Il a fallu ajouter un identifiant (#monaccordeon) à la balise englobante et faire une référence dans les déclencheurs avecdata-parent="#monaccordeon".

Affichage d'une seule zone à la fois
Affichage d'une seule zone à la fois

Tester

De jolies en-têtes

Ça fonctionne bien mais c'est un peu triste sans couleur, comme on utilise le composant panel, c'est facile à arranger (voir figure suivante) :

<div class="container">
  <div id="monaccordeon" class="panel-group col-lg-6">
    <h3> Les plugins de Bootstrap</h3>
    <div class="panel panel-info">
      <div class="panel-heading"> 
        <h3 class="panel-title">
          <a href="#item1" data-parent="#monaccordeon" data-toggle="collapse"> Accordéon </a> 
        </h3>
      </div>
      <div id="item1" class="panel-collapse collapse in">
        <div class="panel-body"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div>
      </div>
    </div>
    <div class="panel panel-info">
      <div class="panel-heading"> 
        <h3 class="panel-title">
          <a href="#item2" data-parent="#monaccordeon" data-toggle="collapse"> Fenêtre modale </a> 
        </h3>
      </div>
      <div id="item2" class="panel-collapse collapse">
        <div class="panel-body"> Ce plugin permet de créer des fenêtres modales élégantes avec une grande simplicité. </div>
      </div>
    </div>
    <div class="panel panel-info">
      <div class="panel-heading"> 
        <h3 class="panel-title">
          <a href="#item3" data-parent="#monaccordeon" data-toggle="collapse"> Carousel </a> 
        </h3>
      </div>
      <div id="item3" class="panel-collapse collapse">
        <div class="panel-body"> Ce plugin permet de faire défiler des images ou des vidéo, ou tout autre élément média avec une mise 
    en forme esthétique </div>
      </div>
    </div>
  </div>
</div>
Des en-têtes esthétiques
Des en-têtes esthétiques

Effet accordéon sur une liste groupée

L'effet accordéon n'est pas limité au composantpanel. On peut par exemple l'utiliser pour une liste groupée. Voici un exemple de mise en œuvre (voir aussi figure suivante) :

<div class="col-sm-3 col-md-3">
  <div class="panel panel-info">
    <div class="panel-heading">
      <h4 class="panel-title">
        <span id="icone" class="glyphicon glyphicon-folder-close"></span> <a data-toggle="collapse" href="#menu">Contenu</a>
      </h4>
    </div>
    <ul id="menu" class="list-group collapse in">
      <li class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span> 
<a href="#"> Articles</a></li>
      <li class="list-group-item"><span class="glyphicon glyphicon-tag text-primary"></span> 
<a href="#"> Nouvelles</a></li>
      <li class="list-group-item"><span class="glyphicon glyphicon-file text-primary"></span> 
<a href="#">   Lettre d'information</a></li>
      <li class="list-group-item"><span class="glyphicon glyphicon-comment text-success"></span> 
<a class="text-success" href="#">Commentaires</a><span class="badge">28</span></li>
    </ul>
  </div>
</div>
Effet accordéon sur une liste groupée
Effet accordéon sur une liste groupée

Tester

Commande en Javascript

On peut activer ce plugin avec Javascript et lancer des commandes sur n'importe quel élément. Voici un exemple (résultat à la figure suivante) :

<div class="container">
  <div class="col-lg-6">
    <div class="btn-group btn-group-justified" data-toggle="buttons">
      <label class="btn btn-primary active" id="show">
        <input type="radio" name="options">Show
      </label>
      <label class="btn btn-primary" id="hide">
        <input type="radio" name="options">Hide
      </label>
      <label class="btn btn-primary" id="toggle">
        <input type="radio" name="options">Toggle
      </label>
    </div>  
    <div class="panel panel-info">
      <div class="panel-heading"> 
        <h3 class="panel-title"> Je suis le titre de l'accordéon</h3>
      </div>
      <div class="panel-body"> Je suis le contenu de l'accordéon</div>
    </div>
  </div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
  $(function(){
      $('.panel').collapse();
      $('#show, #hide, #toggle').click(function(){
        $('.panel').collapse($(this).attr('id'));
      });
  });
</script>
Utilisation de Javascript
Utilisation de Javascript

Tester

L'effet accordéon est ici appliqué sur la<div>qui contient la classepanel. Le plugin est activé avec la méthodecollapse. Ensuite une action sur l'un des trois boutons lance la commande correspondante : show, hide ou toggle. Pour rendre le code plus concis, j'ai fait en sorte que l'identifiant des boutons corresponde au nom d'une commande.

Utilisation des événements

Il y a plusieurs événements utilisables pour ce composant :

Événement

Description

show.bs.collapse

Se déclenche dès l'appel à la méthode show

shown.bs.collapse

Se déclenche lorsque la zone devient visible

hide.bs.collapse

Se déclenche dès l'appel à la méthode hide

hidden.bs.collapse

Se déclenche lorsque la zone est masquée

Voici un exemple d'utilisation de l'événementshown.bs.collapse(voir aussi à la figure suivante) :

<div class="container">
  <div id="monaccordeon" class="panel-group col-lg-6">
      <h3> Les plugins de Bootstrap</h3>
      <div class="panel panel-info">
        <div class="panel-heading"> 
          <h3 class="panel-title">
            <a href="#item1" data-parent="#monaccordeon" data-toggle="collapse"> Accordéon </a> 
          </h3>
        </div>
        <div id="item1" class="panel-collapse collapse in">
          <div class="panel-body"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div>
        </div>
      </div>
      <div class="panel panel-info">
        <div class="panel-heading"> 
          <h3 class="panel-title">
            <a href="#item2" data-parent="#monaccordeon" data-toggle="collapse"> Fenêtre modale </a> 
          </h3>
        </div>
        <div id="item2" class="panel-collapse collapse">
          <div class="panel-body"> Ce plugin permet de créer des fenêtres modales élégantes avec une grande simplicité. </div>
        </div>
      </div>
      <div class="panel panel-info">
        <div class="panel-heading"> 
          <h3 class="panel-title">
            <a href="#item3" data-parent="#monaccordeon" data-toggle="collapse"> Carousel </a> 
          </h3>
        </div>
        <div id="item3" class="panel-collapse collapse">
          <div class="panel-body"> Ce plugin permet de faire défiler des images ou des vidéo, ou tout autre élément média avec une mise 
      en forme esthétique </div>
      </div>
    </div>
    <br>
    <div id="affichage"><span class="label label-warning">"Accordéon" a été affiché !</span></div>
  </div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
$(function (){
  $("#item1").on("shown.bs.collapse", function () {
    $("#affichage").html('<span class="label label-warning">"Accordéon" a été affiché !</span>');
  })
  $("#item2").on("shown.bs.collapse", function () {
    $("#affichage").html('<span class="label label-warning">"Fenêtre modale" a été affiché !</span>');
  })
  $("#item3").on("shown.bs.collapse", function () {
    $("#affichage").html('<span class="label label-warning">"Carousel" a été affiché !</span>');
  })
}); 
</script>
Utilisation des événements
Utilisation des événements

Tester

Voyons à présent un second exemple, en reprenant l'effet accordéon sur une liste groupée vu plus haut. Il serait très esthétique de modifier l'icône en fonction de la visibilité de la liste. Il suffit de modifier légèrement le code en identifiant la liste et en ajoutant un peu de Javascript (résultat à la figure suivante) :

<div class="container">
  <div class="row">
    <div class="col-sm-3 col-md-3">
      <div class="panel panel-info">
        <div class="panel-heading">
          <h4 class="panel-title">
            <span id="icone" class="glyphicon glyphicon-folder-open"></span> <a data-toggle="collapse" href="#menu">Contenu</a>
          </h4>
        </div>
        <ul id="menu" class="list-group collapse in">
          <li class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span> 
<a href="#"> Articles</a></li>
          <li class="list-group-item"><span class="glyphicon glyphicon-tag text-primary"></span> 
<a href="#"> Nouvelles</a></li>
          <li class="list-group-item"><span class="glyphicon glyphicon-file text-primary"></span> 
<a href="#"> Lettre d'information</a></li>
          <li class="list-group-item"><span class="glyphicon glyphicon-comment text-success"></span> 
<a class="text-success" href="#">Commentaires</a><span class="badge">28</span></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
  $(function (){
    $('#menu').on('shown.bs.collapse', function () {
      $('#icone').removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');
    })
    $('#menu').on('hidden.bs.collapse', function () {
      $('#icone').removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
    })
  });
</script>
Les deux états de la liste avec changement de l'icône
Les deux états de la liste avec changement de l'icône

Tester

Une barre de navigation rétractable

Une utilisation du composant accordéon consiste à rendre une barre de navigation rétractable selon la dimension de l'affichage, en d'autres termes de la rendre responsive. Nous l'avons fait pour la page d'exemple (voir la figure suivante).

Barre de navigation rétractable dans la page d'exemple
Barre de navigation rétractable dans la page d'exemple

Tester

Voici la partie du code concernée :

<nav class="navbar navbar-inverse" role="navigation">   
  <div class="navbar-header">   
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Les Tigres</a>
  </div>
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li> <a href="#">Accueil</a> </li>
      <li class="dropdown"> 
        <a data-toggle="dropdown" href="#">Témoignages <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Dompteurs</a></li>
          <li><a href="#">Zoos</a></li>
          <li><a href="#">Chasseurs</a></li>
          <li class="divider"></li>
          <li><a href="#">Autres témoignages</a></li>
        </ul>
      </li> 
      <li> <a href="#">Liens</a> </li>
      <li> <a href="#">Références</a> </li>
    </ul>
    <form class="navbar-form navbar-right" role="form">
      <div class="input-group">
        <input type="text" style="width:150px" class="input-sm form-control" placeholder="Recherche">
          <span class="input-group-btn">
            <button type="submit" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span> Chercher</button>
          </span>
      </div>
    </form>
  </div>
</nav>

On ajoute un bouton chargé de commander l'effet accordéon aux lignes 3 à 7. Ensuite on englobe tout ce qui doit subir l'effet avec les classescollapseetnavbar-collapse. Par défaut le point de transition (c'est-à-dire de déclenchement de l'effet) se produit lorsque l'affichage est inférieur à 768 pixels. Il est possible de changer ce point de transition en modifiant le fichier LESS de Bootstrap. Nous verrons dans un prochain chapitre comment justement modifier Bootstrap pour l'adapter à nos besoins.

Le Scrollspy

Mise en page avec le Scrollspy

Ce plugin permet de relier automatiquement des éléments de navigation avec des zones HTML en utilisant un défilement. Comme un exemple est souvent bien plus efficace qu'une explication, surtout pour ce genre de fonctionnement, voici un style de mise en page de plus en plus utilisé sur les sites (voir aussi figure suivante).

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <link href="assets/css/bootstrap.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".navbar">

<div class="container-fluid">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">La boutique en délire</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#accueil">Accueil</a></li>
          <li><a href="#produits">Produits</a></li>
          <li><a href="#nouvelles">Nouvelles</a></li>
          <li><a href="#localisation">Localisation</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="jumbotron" id="accueil">
    <div class="container">
      <h1 class="well">Bienvenue dans notre espace !</h1>
      <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
      </p>
    </div>
  </div>

  <div class="jumbotron" id="produits">
    <div class="container">
      <h1 class="well">Nos produits attractifs !</h1>
      <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
      </p>
      <hr>
      <div class="row">
        <div class="well">
          <div class="row">
            <div class="col-sm-4">
              <button type="button" class="btn btn-primary btn-lg btn-block">
                <span class="glyphicon glyphicon-wrench"></span><br>Outillage
              </button>
            </div>
            <div class="col-sm-4">
              <button type="button" class="btn btn-primary btn-lg btn-block">
              <span class="glyphicon glyphicon-fire"></span><br>Incendie
              </button>
            </div>
            <div class="col-sm-4">
              <button type="button" class="btn btn-primary btn-lg btn-block">
              <span class="glyphicon glyphicon-home"></span><br>Habitation
              </button>
            </div>
          </div>
        </div>
      </div>     
      <hr>
    </div>
  </div>

  <div class="jumbotron" id="nouvelles">
    <div class="container">
      <h1 class="well">Les nouvelles de nos activités !</h1>
      <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
      </p>
      <hr>
      <div class="row">
        <div class="well">
          <div class="row">
            <div class="col-sm-4">
              <button type="button" class="btn btn-info btn-lg btn-block">
                <span class="glyphicon glyphicon-wrench"></span><br>Outillage
              </button>
            </div>
            <div class="col-sm-4">
              <button type="button" class="btn btn-info btn-lg btn-block">
              <span class="glyphicon glyphicon-fire"></span><br>Incendie
              </button>
            </div>
            <div class="col-sm-4">
              <button type="button" class="btn btn-info btn-lg btn-block">
              <span class="glyphicon glyphicon-home"></span><br>Habitation
              </button>
            </div>
          </div>
        </div>
      </div>     
      <hr>
    </div>
  </div>

  <div class="jumbotron" id="localisation">
    <div class="container">
      <h1 class="well">L'emplacement de nos boutiques !</h1>
      <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
      </p>
      <hr>
      <div class="row">
        <div class="well">
          <div class="row">
            <div class="col-sm-4">
              <button type="button" class="btn btn-warning btn-lg btn-block">
                <span class="glyphicon glyphicon-wrench"></span><br>Outillage
              </button>
            </div>
            <div class="col-sm-4">
              <button type="button" class="btn btn-warning btn-lg btn-block">
              <span class="glyphicon glyphicon-fire"></span><br>Incendie
              </button>
            </div>
            <div class="col-sm-4">
              <button type="button" class="btn btn-warning btn-lg btn-block">
              <span class="glyphicon glyphicon-home"></span><br>Habitation
              </button>
            </div>
          </div>
        </div>
      </div>     
      <hr>
    </div>
  </div>

</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
Mise en page avec le ScrollSpy
Mise en page avec le Scrollspy

Tester

Le principe est simple. Il faut mettre en œuvre le plugin avec l'attributdata-spy="scroll"et on pointe la navigation avecdata-target:

<body data-spy="scroll" data-target=".navbar">

Ensuite on crée la navigation qui pointe des zones à faire apparaître sans ajout d'autres classes, le fonctionnement est automatique.

Un mouvement fluide

L'exemple fonctionne correctement, mais on peut regretter la brutalité du mouvement. La zone demandée s'affiche spontanément et on ne comprend pas vraiment qu'il se produit un défilement. Il serait plus élégant d'avoir un mouvement fluide pour passer d'une zone à une autre. Ce n'est pas prévu au niveau du plugin, mais avec quelques lignes de Javascript on peut réaliser cela :

$(function () {
  $('li>a').on('click', function(e) {
    e.preventDefault();
    var hash = this.hash;
    $('html, body').animate({
      scrollTop: $(this.hash).offset().top
    }, 1000, function(){
      window.location.hash = hash;
    });
  });
});

Tester

Activation par Javascript

On a vu dans l'exemple que le plugin peut être simplement mis en œuvre avec un attribut "data". Il est aussi possible de le faire en Javascript. Pour tester cette possibilité, il faut retirer les attributs de la balisebodyet ajouter cette ligne de Javascript :

$('body').scrollspy({ target: '.navbar' });

Tester

Vous disposez aussi de l'événementactivate.bs.scrollspyqui est déclenché lorsqu'une nouvelle zone est affichée. L'utilité de cet événement ne saute pas aux yeux, mais si vous en avez éventuellement besoin la syntaxe est la suivante :

$('#monScrollspy').on('activate.bs.scrollspy', function () {
  // Ici je fais quelque chose...
})

En résumé

  • Bootstrap propose une collection de plugins jQuery faciles à mettre en œuvre.

  • Les menus déroulants permettent l'affichage de liens textuels, auxquels on peut adjoindre des icônes et des en-têtes. Ils peuvent s'intégrer à une barre de navigation ou un bouton. On peut réaliser des sous-menus en ajoutant quelques styles au framework.

  • Les fenêtres modales permettent de faire apparaître des informations. Elles peuvent comporter un titre, un contenu et un bas de page. On peut même y injecter une page HTML.

  • Les onglets permettent sur un même espace d'afficher au choix plusieurs informations avec un simple clic. Les onglets sont faciles à organiser : horizontaux, empilés, à droite ou à gauche, simple liens ou boutons. On peut aussi intégrer un menu déroulant dans un onglet.

  • On peut créer des boutons "bascule", ou avec effet "radio" ou "checkbox", ou pour attente de fin d'un processus.

  • Le carrousel permet de faire défiler des images avec possibilité d'ajouter une légende par image, des boutons de défilement et de régler la vitesse de défilement.

  • Les info-bulles permettent de faire apparaître un petit texte informatif en survolant un élément, les pop-overs également mais autorisent un contenu plus riche.

  • L'effet accordéon permet de faire apparaître ou disparaître une zone de la page. Il est possible d'ajouter des en-têtes et d'intégrer des listes groupées. On l'utilise en particulier pour rendre une barre de navigation rétractable.

  • Le Scrollspy permet de relier automatiquement des éléments de navigation avec des zones HTML en utilisant un défilement. Il est de plus en plus utilisé sur les sites web.

Exemple de certificat de réussite
Exemple de certificat de réussite