JavaScript

Accordéon

Simple

Afficher / masquer un élément .collapse.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget eros turpis. Mauris pellentesque accumsan gravida. Pellentesque sit amet turpis lorem.

Suspendisse varius mollis rutrum. Suspendisse sed venenatis tellus. Suspendisse feugiat tortor ac purus maximus, quis tempor ipsum pretium. Cras volutpat, nisi viverra semper ultricies, sem urna faucibus nunc, in varius arcu orci ac lectus.

  1. <p>
  2.   <button class="btn btn-large btn-primary" data-target="#collapseExample" data-toggle="collapse">Démonstration</button>
  3. </p>
  4. <div class="collapse" id="collapseExample">
  5.   ...
  6. </div>

Multiple

Afficher / masquer un élément .collapse au sein d'un groupe d'éléments.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et enim nisl. Nunc tempor sem non lectus accumsan, sit amet hendrerit lectus maximus. Nunc consectetur ac nibh a tempus. Donec luctus, ligula a vehicula ultrices, risus arcu luctus dui, posuere ultrices elit dolor eu orci. In finibus orci elementum massa placerat, sed egestas nisi accumsan. Phasellus posuere ante eu ultricies facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et enim nisl. Nunc tempor sem non lectus accumsan, sit amet hendrerit lectus maximus. Nunc consectetur ac nibh a tempus. Donec luctus, ligula a vehicula ultrices, risus arcu luctus dui, posuere ultrices elit dolor eu orci. In finibus orci elementum massa placerat, sed egestas nisi accumsan. Phasellus posuere ante eu ultricies facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et enim nisl. Nunc tempor sem non lectus accumsan, sit amet hendrerit lectus maximus. Nunc consectetur ac nibh a tempus. Donec luctus, ligula a vehicula ultrices, risus arcu luctus dui, posuere ultrices elit dolor eu orci. In finibus orci elementum massa placerat, sed egestas nisi accumsan. Phasellus posuere ante eu ultricies facilisis.
  1. <div class="panel-group" id="accordion">
  2.   <div class="panel open">
  3.     <div class="panel-heading">
  4.       <a class="panel-control" data-accordion="#accordion" data-parent=".panel" data-toggle="collapse" href="#panel1">Panel 1</a>
  5.     </div>
  6.     <div class="panel-body collapse in" id="panel1">...</div>
  7.   </div>
  8.   <div class="panel">
  9.     <div class="panel-heading">
  10.       <a class="panel-control" data-accordion="#accordion" data-parent=".panel" data-toggle="collapse" href="#panel2">Panel 2</a>
  11.     </div>
  12.     <div class="panel-body collapse" id="panel2">...</div>
  13.   </div>
  14.   <div class="panel">
  15.     <div class="panel-heading">
  16.       <a class="panel-control" data-accordion="#accordion" data-parent=".panel" data-toggle="collapse" href="#panel3">Panel 3</a>
  17.     </div>
  18.     <div class="panel-body collapse" id="panel3">...</div>
  19.   </div>
  20. </div>

Usage

Via attributs data

Appel du plugin Collapse via data-toggle="collapse" sur l'élément défini par data-target ou href.

Via JavaScript

  1. $('.collapse').collapse();

Options

Nom Type Défaut Description
accordion selecteurCSS null Identifiant CSS du groupe d'éléments.
orientation string 'vertical' Si accordion est défini sur null, permet d'ouvrir l'élément horizontalement. Conçu pour un menu de navigation.
parent selecteurCSS null Identifiant CSS de l'élément parent sur lequel sera reporté la class .open après ouverture de l'élément.
show boolean true Afficher / masquer l'élément.

Méthodes

.collapse(options)

Appel du plugin Collapse en JavaScript :

  1. $('.collapse').collapse({
  2.   accordion: '#accordion',
  3.   parent: '.panel'
  4. });

.collapse('show')

Ouvrir en accordéon un élément .collapse.

.collapse('hide')

Fermer en accordéon un élément .collapse.

.collapse('toggle')

Ouvrir / Fermer un élément .collapse en accordéon.

Événements

Événement Description
on.show.collapse Cet événement se déclenche avant l'ouverture de l'élément.
on.shown.collapse Cet événement se déclenche dès que l'élément est complètement ouvert.
on.hide.collapse Cet événement se déclenche avant la fermeture de l'élément.
on.hidden.collapse Cet événement se déclenche dès que l'élément est complètement fermé.
  1. $('.collapse').on('on.show.collapse', function(){
  2.   // action…
  3. });

Clickable

Rendre cliquable la surface totale d'un élément.

Img

Titre de l'élément

  • Publié le 10/04/2016
  • Dans Voyages
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1. <div class="media-list media-stacked">
  2.   <div class="media" data-provide="clickable" data-classname="pointer">
  3.     <div class="media-object">
  4.       <a href="http://www.e-monsite.com">
  5.         <img alt="Img" height="140" width="140" src="...">
  6.       </a>
  7.     </div>
  8.     <div class="media-body">
  9.       <p class="media-heading"><a href="http://www.e-monsite.com">Titre de l'élément</a></p>
  10.       ...
  11.     </div>
  12.   </div>
  13. </div>

Usage

Via attributs data

Activation automatique sur tout élément disposant de l'attribut data-provide="clickable".

Via JavaScript

Appel de l'effet clickable sur tout élément via JavaScript.

  1. $('.media').clickable({classname:'pointer'});

Options

Les options peuvent être définies via des attributs data ou lors de l'appel du plugin en JavaScript.

Nom Type Défault Description
classname string null Classe appliquée sur l'élément lors du survol.
maxwidth number 991 Résolution maximale en pixels jusqu'à laquelle la surface totale de l'élément sera cliquable.
target selecteur CSS null Sélecteur CSS permettant de cibler le lien contenant l'url de destination. Si non définie, l'url de destination sera celle du premier lien rencontré dans l'élément.

Fix

Fixer la position verticale d'un élément, comme par exemple le menu de navigation sur cette page.

Exemple en pleine page

Usage

Via attributs data

Activation automatique sur tout élément doté de l'attribut data-provide="fix".

  1. <div data-provide="fix" data-from="50">...</div>

Via JavaScript

Appel du plugin Fix en JavaScript.

  1. $('#sidebar').find('.nav').fix();

Options

Les options peuvent être définies via des attributs data ou lors de l'appel du plugin en JavaScript.

Nom Type Défaut Description
classname string null Nom de la classe appliquée à l'élément lorsqu'il est fixé.
from number | sélecteur CSS 0 Valeur de défilement de la page en pixels à partir de laquelle l'élément sera fixé. Si un sélecteur CSS est défini, l'élément sera fixé dès que le bord supérieur de l'élément ciblé atteindra la limite supérieur de l'écran.
offset number 0 Valeur de compensation en pixels, permettant d'anticiper la fixation de l'élément.
to number | sélecteur CSS null Valeur de défilement de la page en pixels jusqu'à laquelle l'élément sera fixé. Si un sélecteur CSS est défini, l'élément sera fixé tant que le bord inférieur de l'élément ciblé ne sera pas aligné avec la bord inférieur de l'élément fixé.
viewportmax number null Largeur maximale de la fenêtre du navigateur jusqu'à laquelle l'élément sera fixé.
viewportmin number null Largeur minimale de la fenêtre du navigateur à partir de laquelle l'élément sera fixé.
width number | sélecteur CSS null Largeur en pixels de l'élément fixé. Si un sélecteur CSS est défini, la largeur de l'élément fixé sera celle de l'élément ciblé par le sélecteur.

Méthodes

.fix(options)

Initialiser le plugin Fix et définir ses options.

  1. $('#sidebar').find('.nav').fix({from:50});

.fix('refresh')

Actualiser la position et la hauteur de l'élément fixé ainsi que celles des éléments éventuellement ciblés via les options to et/ou from.

Événements

Événement Description
on.start.fix Cet événement se déclenche dès que l'élément est fixé.
on.end.fix Cet événement se déclenche dès que l'élément n'est plus fixé.
  1. $('#sidebar').find('.nav').on('on.start.fix', function(){
  2.   // action…
  3. });

Form validation

Évaluer les éléments d'un formulaire avant validation.

Ajouter la classe .has-required sur .control-group pour évaluer le champ correspondant.

Choix de cases à cocher requis
Choix de bouton radio requis
  1. <form action="#" data-provide="validate">
  2.   <div class="control-group control-type-text has-required">
  3.     <label for="requiredInput">Champ requis</label>
  4.     <div class="controls">
  5.       <input id="requiredInput" placeholder="Champ requis" type="text">
  6.     </div>
  7.   </div>
  8.   <div class="control-group control-type-checkbox has-required">
  9.     <span class="as-label">Choix de cases à cocher requis</span>
  10.     <div class="controls">
  11.       <label class="checkbox">
  12.         <input name="requiredChekboxes" type="checkbox" value="1"> Cochez-moi
  13.       </label>
  14.       <label class="checkbox">
  15.         <input name="requiredChekboxes" type="checkbox" value="2"> Cochez-moi
  16.       </label>
  17.     </div>
  18.   </div>
  19.   <div class="control-group control-type-radio has-required">
  20.     <span class="as-label">Choix de bouton radio requis</span>
  21.     <div class="controls">
  22.       <label class="radio">
  23.         <input name="requiredRadios" type="radio" value="option1"> Option 1
  24.       </label>
  25.       <label class="radio">
  26.         <input name="requiredRadios" type="radio" value="option2"> Option 2
  27.       </label>
  28.     </div>
  29.   </div>
  30.   <div class="control-group form-actions">
  31.     <div class="controls">
  32.       <input class="btn btn-primary" type="submit" value="Valider">
  33.     </div>
  34.   </div>
  35. </form>

Usage

Via attributs data

Activation automatique sur tout formulaire doté de l'attribut data-provide="validate".

Via JavaScript

Appel du plugin Validate en JavaScript.

  1. $('form').validate().on({
      'on.error.validate': function(e, controls){
        var errorMsg = '';
        for($i = 0; $i < controls.length; $i++){
          if(!controls[$i].isvalid)
            errorMsg += '<li>' + controls[$i].label + '</li>';
        }
        $.modal({
          buttonCancel    : 'Fermer',
          content            : '<ul class="list-unstyled">' + errorMsg + '</ul>',
          title            : 'Merci de compléter les champs suivants :',
          type            : 'error'
        });
      }
    });

Événements

Événement Description
on.submit.validate(e, ins[object]) Cet événement se déclenche dès la soumission du formulaire. 
Nom Type Défaut Description
ins.submit boolean true Poursuivre ou annuler la soumission.
on.success.validate(e, ins[object]) Cet événement se déclenche avant l'envoi du formulaire.
Nom Type Défaut Description
ins.success boolean true Poursuivre ou annuler l'envoi.
on.error.validate(e, controls[object]) Cet événement se déclenche en cas d'erreur dans le formulaire.
Nom Type Description
controls[].index boolean Index du champ.
controls[].isvalid boolean Champ valide ou invalide.
controls[].label boolean Label du champ.

Parallax

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris sed lectus ut tortor efficitur dignissim ac sit amet ante. Morbi sit amet ligula dui. Sed sed tellus non arcu elementum dignissim. In elementum placerat aliquam. Fusce dapibus ultrices justo. Aliquam consectetur nunc tortor, et facilisis diam eleifend a. Vivamus tellus turpis, condimentum eu nisi tempor, semper dictum est.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris sed lectus ut tortor efficitur dignissim ac sit amet ante. Morbi sit amet ligula dui. Sed sed tellus non arcu elementum dignissim. In elementum placerat aliquam. Fusce dapibus ultrices justo. Aliquam consectetur nunc tortor, et facilisis diam eleifend a. Vivamus tellus turpis, condimentum eu nisi tempor, semper dictum est.

Proin est urna, sollicitudin vel sodales in, laoreet vitae diam.

  1. <div data-provide="parallax" data-background="img01.jpg" data-height="70%" data-inertia=".5"></div>
  2. <div class="bg-primary">...</div>
  3. <div id="parallaxExample"></div>
  4. <div class="bg-success">...</div>
  5.  
  6. <script>
  7. $('#parallaxExample').parallax({
  8.   background:'http://ems-framework.e-monsite.com/medias/images/parallax02.jpg',
  9.   height:'50%',
  10.   posy:'bottom',
  11.   inertia:.3
  12. });
  13. </script>

Exemple en pleine page

Usage

Via attributs data

Activation automatique sur tout élément de type block disposant de l'attribut data-provide="parallax".

Via JavaScript

Appel de l'effet Parallax sur tout élément de type block via JavaScript.

  1. $('#parallaxExample2').parallax({background:'img02.jpg'});

Options

Les options peuvent être définies via des attributs data ou lors de l'appel du plugin en JavaScript.

Nom Type Défaut Description
background string null Url de l'image de fond. Option obligatoire !
height string null Hauteur de l'élément.
inertia number .5 Vitesse en fonction du scroll. Exemple: .1 = 1/10 ème de la vitesse du scroll.
posx string 'center' Position horizontale de l'image. Valeur possible : left|center|right
posy string 'center' Position verticale de l'image. Valeur possible : top|center|bottom
responsive boolean true Ajustement de la largeur de l'image à la largeur de l'écran
viewportmin number null Largeur minimale de la fenêtre du navigateur à partir de laquelle l'effet Parallax sera appliqué.

Recommandations

Images utilisées

  • Privilégier un format horizontal, un ratio de 3tiers/2tiers est un bon compromis. Exemple : 1920 x 1280px.
  • La taille des images doit être conséquente afin d'éviter une perte de qualité sur grand écran. Une largeur de 1920px est un bon compromis.
  • Préférer le format .jpg pour les photographies et le format .png pour les illustrations.
  • Afin d'optimiser le temps de chargement, compressez vos images à l'aide d'un service en ligne comme par exemple Tinyjpg.

Scrollspy

Application automatique d'une classe classname sur un élément de navigation en fonction de la position de défilement. Un click sur le lien de navigation active le défilement jusqu'à l'élément correspondant. 

L'attribut href des liens de navigation doit reprendre l'attribut id de l'élément correspondant.

Partie 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non elit diam. Aenean ultrices vel sapien ut pellentesque. Praesent cursus venenatis nulla, convallis molestie libero placerat ac. Praesent varius sapien sollicitudin, dictum ligula vitae, euismod tortor. Cras egestas, mauris in dictum faucibus, turpis velit tristique nisi, nec pretium magna massa quis lorem. Sed nec tristique leo. Donec a dui erat. Nam sagittis, velit non pellentesque porta, lacus nisl euismod neque, et egestas nisi nibh sit amet augue. Aenean a posuere tellus. Proin viverra rhoncus eleifend. Sed eu nulla dapibus, tristique velit vel, rutrum sapien. Curabitur a turpis nisi. Vestibulum pretium vitae lorem in lacinia. Donec non ipsum in felis faucibus viverra.

Partie 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non elit diam. Aenean ultrices vel sapien ut pellentesque. Praesent cursus venenatis nulla, convallis molestie libero placerat ac. Praesent varius sapien sollicitudin, dictum ligula vitae, euismod tortor. Cras egestas, mauris in dictum faucibus, turpis velit tristique nisi, nec pretium magna massa quis lorem. Sed nec tristique leo. Donec a dui erat. Nam sagittis, velit non pellentesque porta, lacus nisl euismod neque, et egestas nisi nibh sit amet augue. Aenean a posuere tellus. Proin viverra rhoncus eleifend. Sed eu nulla dapibus, tristique velit vel, rutrum sapien. Curabitur a turpis nisi. Vestibulum pretium vitae lorem in lacinia. Donec non ipsum in felis faucibus viverra.

Partie 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non elit diam. Aenean ultrices vel sapien ut pellentesque. Praesent cursus venenatis nulla, convallis molestie libero placerat ac. Praesent varius sapien sollicitudin, dictum ligula vitae, euismod tortor. Cras egestas, mauris in dictum faucibus, turpis velit tristique nisi, nec pretium magna massa quis lorem. Sed nec tristique leo. Donec a dui erat. Nam sagittis, velit non pellentesque porta, lacus nisl euismod neque, et egestas nisi nibh sit amet augue. Aenean a posuere tellus. Proin viverra rhoncus eleifend. Sed eu nulla dapibus, tristique velit vel, rutrum sapien. Curabitur a turpis nisi. Vestibulum pretium vitae lorem in lacinia. Donec non ipsum in felis faucibus viverra.

Partie 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non elit diam. Aenean ultrices vel sapien ut pellentesque. Praesent cursus venenatis nulla, convallis molestie libero placerat ac. Praesent varius sapien sollicitudin, dictum ligula vitae, euismod tortor. Cras egestas, mauris in dictum faucibus, turpis velit tristique nisi, nec pretium magna massa quis lorem. Sed nec tristique leo. Donec a dui erat. Nam sagittis, velit non pellentesque porta, lacus nisl euismod neque, et egestas nisi nibh sit amet augue. Aenean a posuere tellus. Proin viverra rhoncus eleifend. Sed eu nulla dapibus, tristique velit vel, rutrum sapien. Curabitur a turpis nisi. Vestibulum pretium vitae lorem in lacinia. Donec non ipsum in felis faucibus viverra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non elit diam. Aenean ultrices vel sapien ut pellentesque. Praesent cursus venenatis nulla, convallis molestie libero placerat ac. Praesent varius sapien sollicitudin, dictum ligula vitae, euismod tortor. Cras egestas, mauris in dictum faucibus, turpis velit tristique nisi, nec pretium magna massa quis lorem. Sed nec tristique leo.

Donec a dui erat. Nam sagittis, velit non pellentesque porta, lacus nisl euismod neque, et egestas nisi nibh sit amet augue. Aenean a posuere tellus. Proin viverra rhoncus eleifend. Sed eu nulla dapibus, tristique velit vel, rutrum sapien. Curabitur a turpis nisi. Vestibulum pretium vitae lorem in lacinia. Donec non ipsum in felis faucibus viverra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non elit diam. Aenean ultrices vel sapien ut pellentesque. Praesent cursus venenatis nulla, convallis molestie libero placerat ac. Praesent varius sapien sollicitudin, dictum ligula vitae, euismod tortor. Cras egestas, mauris in dictum faucibus, turpis velit tristique nisi, nec pretium magna massa quis lorem.

  1. <ul class="nav nav-tabs" id="scrollspy-target">
  2.   <li><a href="#part1">Partie 1</a></li>
  3.   ...
  4. </ul>
  5. <div data-provide="scrollspy" data-target="#scrollspy-target" id="scrollspyExample">
  6.   <div id="part1">...</div>
  7.   ...
  8. </div>

Usage

Via attributs data

Activation automatique sur tout élément disposant de l'attribut data-provide="scrollspy".

Via JavaScript

Appel de l'effet Scrollspy sur cette page et définition de la navigation contenue dans <div id="sidebar"> en tant que cible :

  1. $('body').scrollspy({target:'#sidebar',speed:1000});

Options

Les options peuvent être définies via des attributs data ou lors de l'appel du plugin en JavaScript.

Nom Type Défaut Description
classname string 'active' Classe appliquée sur l'élément de navigation.
offset number 0 Valeur de compensation en pixels, permettant d'anticiper l'application de la classe classname.
speed number 240  Vitesse du défilement en millisecondes lors du clique sur un élément de navigation.
target Sélecteur CSS null  Sélecteur CSS permettant de cibler l'élément contenant la navigation. Option obligatoire !

Méthodes

.scrollspy(options)

Initialiser l'effet et définir ses options.

  1. $('body').scrollspy();

Événements

Événement Description
on.beforeScroll.scrollspy Cet événement se déclenche avant le défilement de l'élément.
on.afterScroll.scrollspy Cet événement se déclenche après le défilement de l'élément.
  1. $('body').on('on.beforeScroll.scrollspy', function(){
  2.   // action…
  3. });

Sur les éléments de navigation.

Événement Description
on.start.scrollspy Cet événement se déclenche dès que la classe classname est appliquée sur l'élément.
on.stop.scrollspy Cet événement se déclenche dès que la classe classname est supprimée de l'élément.
  1. $('#sidebar').find('a').on('on.start.scrollspy', function(){
  2.   // action…
  3. });

Tooltip

Afficher du contenu dans une info-bulle.

  1. <ul class="list-inline">
  2.   <li><a href="javascript:void(0)" data-toggle="tooltip" title="Tooltip au-dessus">Au dessus</a></li>
  3.   <li><a href="javascript:void(0)" data-toggle="tooltip" title="Tooltip au dessous" data-position="bottom">Au dessous</a></li>
  4.   <li><a href="javascript:void(0)" data-toggle="tooltip" title="Tooltip à gauche" data-position="left">À gauche</a></li>
  5.   <li><a href="javascript:void(0)" data-toggle="tooltip" title="Tooltip à droite" data-position="right">À droite</a></li>
  6. </ul>

Positionnement relatif à la souris

Relatif à la souris

  1. <p>
  2.   <a href="javascript:void(0)" data-toggle="tooltip" title="Tooltip au dessus" data-origin="mouse" data-container="body">Relatif à la souris</a>
  3. </p>

Usage

Via attributs data

Activation automatique sur tout élément disposant de l'attribut data-toggle="tooltip".

Via JavaScript

Appel du plugin Tooltip en JavaScript :

  1. $(window).on('load, function(){
  2.   $('.btn').tooltip();
  3. });

Options

Les options peuvent être définies via des attributs data ou lors de l'appel du plugin Tooltip en JavaScript.

Nom Type Par défaut Description
animation boolean true Animer l'infobulle lors de son apparition.
bgcolor string null Couleur de fond de l'infobulle.
classname string null Classe appliquée sur l'infobulle.
color string null Couleur du texte de l'infobulle.
container string|false false Élément à la fin duquel l'infobulle sera ajoutée via append. Par défaut l'infobulle est insérée directement après l'élément.
content string [title] Contenu de l'infobulle. Si non renseigné, la valeur de l'attribut title est repris.
event string 'hover focus' Évènement déclenchant l'apparition de l'infobulle. Valeurs possibles : 'hover'|'focus'|'click'|'manual'.
html boolean false Définir le contenu de l'infobulle en tant que code HTML.
id string null Id assigné à l'infobulle.
origin string 'default' Point d'origine de l'infobulle. Valeurs possibles : 'default' | 'center' | 'mouse'.
position string 'top' Position de l'infobulle par rapport à l'élément. Valeurs possibles : 'top' | 'right' | 'bottom' | 'left'.

Méthodes

.tooltip(options)

Initialiser l'infobulle et définir ses options.

  1. $('.btn').tooltip({html: true});

.tooltip('show')

Affiche une infobulle.

.tooltip('hide')

Cache une infobulle.

.tooltip('toggle')

Affiche ou cache une infobulle.

.tooltip('reset')

Supprime une infobulle rattachée à un élément.

Événements

Événement Description
on.show.tooltip Cet événement se déclenche avant l'apparition de l'infobulle.
on.shown.tooltip Cet événement se déclenche après l'apparition de l'infobulle.
on.hide.tooltip Cet événement se déclenche avant la disparition de l'infobulle.
on.hidden.tooltip Cet événement se déclenche après la disparition de l'infobulle.
  1. $('[data-toggle="tooltip"]').on('on.shown.tooltip', function(){
  2.   // action…
  3. });

Utiles

$.isMobile()

Détecter si le terminal est un appareil mobile.

  1. if($.isMobile())
  2. {
  3.   //it's a mobile terminal
  4. }
  5. else
  6. {
  7.   //it's not a mobile terminal
  8. }

$.browser()

Détecter le navigateur.

Méthodes

$.browser('version')

Détecter la version du navigateur.