JavaScript

<div class="modal-overlay">
	<div class="modal">
	    <div class="modal-heading">
	        <span class="modal-title">Titre de la boîte de dialogue</span>
	    </div>
	    <div class="modal-body">
	        <p>Contenu de la boîte de dialogue</p>
	    </div>
	    <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-role="modal-cancel">Fermer</button>
	        <button type="button" class="btn btn-primary" data-role="modal-confirm">Confirmer</button>
	    </div>
	</div>
</div>

Usage via JavaScript

Options

Méthodes

$.modal(options)

$.modal({content: 'Contenu'});

$.modal('hide')

Événements

Démonstration

<p>
	<a href="javascript:void(0)" id="launchAlert" class="btn btn-primary btn-large">Démonstration</a>
</p>
<script>
$('#launchAlert').click(function(){
    $.modal({
        buttonCancel:   'Annuler',
        buttonConfirm:  'Confirmer',
        content:        '<p class="text-center">Voici le contenu centré de la fenêtre d\'alerte</p>'
    })
    .on({
        'on.confirm.modal': function(){
            alert('confirmed !');
        },
        'on.cancel.modal': function(){
            alert('canceled !');
        }
    });
});
</script>

Simple

Démonstration

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

Multiple

<div class="panel-group" id="accordion">
	<div class="panel open">
	    <div class="panel-heading">
	        <a class="panel-control" data-accordion="#accordion" data-parent=".panel" data-toggle="collapse" href="#panel1">Panel 1</a>
	    </div>
	    <div class="panel-body collapse in" id="panel1">...</div>
	</div>
	<div class="panel">
	    <div class="panel-heading">
	        <a class="panel-control" data-accordion="#accordion" data-parent=".panel" data-toggle="collapse" href="#panel2">Panel 2</a>
	    </div>
	    <div class="panel-body collapse" id="panel2">...</div>
	</div>
	<div class="panel">
	    <div class="panel-heading">
	        <a class="panel-control" data-accordion="#accordion" data-parent=".panel" data-toggle="collapse" href="#panel3">Panel 3</a>
	    </div>
	    <div class="panel-body collapse" id="panel3">...</div>
	</div>
</div>

Usage

Via attributs data

Via JavaScript

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

Options

Méthodes

.collapse(options)

$('.collapse').collapse({
	accordion:  '#accordion',
	parent:     '.panel'
});

.collapse('show')

.collapse('hide')

.collapse('toggle')

Événements

$('.collapse').on('on.show.collapse', function(){
	//action…
});

Si Jquery Mobile est disponible, sur les terminaux mobiles, le passage d'une image à l'autre s'effectuera d'un mouvement de doigt vers la gauche ou la droite.

1.  
2.  
3.  

Titre de l'image 1

Courte description de l'image 1

Titre de l'image 2

Courte description de l'image 2

Titre de l'image 3

Courte description de l'image 3

   

<div class="carousel" id="carouselExample">
	<ol class="carousel-indicators">
	    <li data-slide-to="0" data-target="#carouselExample" class="active"></li>
	    <li data-slide-to="1" data-target="#carouselExample"></li>
	    <li data-slide-to="2" data-target="#carouselExample"></li>
	</ol>
	<div class="carousel-inner">
	    <div class="item active">
	        <img src="...">
	        <div class="carousel-caption">
	            <h3>Titre de l'image 1</h3>
	            <p>Courte description de l'image 1</p>
	        </div>
	    </div>
	    <div class="item">...</div>
	    <div class="item">...</div>
	</div>
	<a class="left carousel-control" href="#carouselExample" data-slide="prev">
	    <i class="fa fa-chevron-left"></i>
	</a>
	<a class="right carousel-control" href="#carouselExample" data-slide="next">
	    <i class="fa fa-chevron-right"></i>
	</a>
</div>

Usage

Via attributs data

Via JavaScript

$(window).on('load', function(){
	$('.carousel').carousel();
});

Options

Méthodes

.carousel(options)

$('.carousel').carousel({cycling: 5000});

.carousel('play')

.carousel('pause')

.carousel(number)

.carousel('prev')

.carousel('next')

.carousel('current')

Événements

$('.carousel').on('on.beforeSlide.carousel', function(){
	// action…
});

Avec vignettes

Titre de l'image 1

Courte description de l'image 1

Titre de l'image 2

Courte description de l'image 2

Titre de l'image 3

Courte description de l'image 3

Titre de l'image 4

Courte description de l'image 4

Titre de l'image 5

Courte description de l'image 5

Titre de l'image 6

Courte description de l'image 6

   

<div class="carousel" data-thumbnails="true" data-transition="fade">
	...
</div>

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.

<div class="media-list media-stacked">
	<div class="media" data-provide="clickable" data-classname="pointer">
	    <div class="media-object">
	        <a href="http://www.e-monsite.com">
	            <img alt="Img" height="140" width="140" src="...">
	        </a>
	    </div>
	    <div class="media-body">
	        <p class="h4 media-heading"><a href="http://www.e-monsite.com">Titre de l'élément</a></p>
	        ...
	    </div>
	</div>
</div>

Usage

Via attributs data

Via JavaScript

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

Options

Exemple en pleine page

Usage

Via attributs data

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

Via JavaScript

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

Options

Méthodes

.fix(options)

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

.fix('refresh'[, options])

$(window).on({
    'load' : function(){
        //Instanciation du plugin
        var $offset = $('header').height();
        $('#sidebar').find('.nav').fix({offset : $offset});
    },
    'resize' : function(){
        //Actualisation du plugin
        var $offset = $('header').height();
        $('#sidebar').find('.nav').fix('refresh', {offset : $offset});
    }
});

.fix('reset')

Événements

$('#sidebar').find('.nav').on('on.start.fix', function(){
	// action…
});

<form action="#" data-provide="validate">
	<div class="control-group control-type-text has-required">
	    <label for="requiredInput">Champ requis</label>
	    <div class="controls">
	        <input id="requiredInput" placeholder="Champ requis" type="text">
	    </div>
	</div>
	<div class="control-group control-type-checkbox has-required">
	    <span class="as-label">Choix de cases à cocher requis</span>
	    <div class="controls">
	        <label class="checkbox">
	            <input name="requiredChekboxes" type="checkbox" value="1"> Cochez-moi
	        </label>
	        <label class="checkbox">
	            <input name="requiredChekboxes" type="checkbox" value="2"> Cochez-moi
	        </label>
	    </div>
	</div>
	<div class="control-group control-type-radio has-required">
	    <span class="as-label">Choix de bouton radio requis</span>
	    <div class="controls">
	        <label class="radio">
	            <input name="requiredRadios" type="radio" value="option1"> Option 1
	        </label>
	        <label class="radio">
	            <input name="requiredRadios" type="radio" value="option2"> Option 2
	        </label>
	    </div>
	</div>
	<div class="control-group form-actions">
	    <div class="controls">
	        <input class="btn btn-primary" type="submit" value="Valider">
	    </div>
	</div>
</form>

Usage

Via attributs data

Via JavaScript

$('form').validate();

Événements

$('form').on({'on.error.validate': function(e, controls){
    var errorMsg = '';
    for(var 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'
    });
});

<div class="dropdown">
	<button class="btn btn-default" data-toggle="dropdown" type="button">Menu déroulant</button>
	<ul class="dropdown-menu">
	    <li><a href="#">Élément de menu</a></li>
	    <li><a href="#">Élément de menu</a></li>
	    <li><a href="#">Élément de menu</a></li>
    </ul>
</div>

Définir une méthode d'ouverture du menu

Usage

Via attributs data

Via JavaScript

$('button').dropdown({animation:'fade'});

Options

Méthodes

.dropdown(options)

.dropdown('show')

.dropdown('hide')

.dropdown('toggle')

.dropdown('reset')

Événements

$('button').on('on.hide.dropdown', function(){
    // action…
});

<nav class="navbar">
	<ul class="nav navbar-nav">
	    <li><a href="#">Accueil</a></li>
	    <li class="subnav">
	        <a data-toggle="subnav" href="javascript:void(0)">Boutique</a>
	        <ul class="nav subnav-menu">
	            <li><a href="#">Nouveautés</a></li>
	            <li><a href="#">Promotions</a></li>
	            <li class="subnav">
	                <a data-toggle="subnav" href="javascript:void(0)">Catalogue</a>
	                <ul class="nav subnav-menu">
	                    <li><a href="#">Homme</a></li>
	                    ...
	                </ul>
	            </li>
	        </ul>
	    </li>
	    <li class="subnav">
	        <a data-toggle="subnav" href="javascript:void(0)">Compte</a>
	        <ul class="nav subnav-menu">
	            <li><a href="#">Profil</a></li>
	            ...
	        </ul>
	    </li>
	</ul>
</nav>

Définir une méthode d'ouverture du sous-menu

Usage

Via attributs data

Via JavaScript

$('[data-toggle="subnav"]').subnav({animation:'fade'});

Options

Méthodes

.subnav(options)

.subnav('show')

.subnav('hide')

.subnav('toggle')

.subnav('reset')

Événements

$('[data-toggle="subnav"]').on('on.hide.subnav', function(){
	// action…
});

<div id="parallax1"></div>
<div class="bg-primary">...</div>
<div id="parallax2"></div>
<div class="bg-success">...</div>
	
<script>
$('#parallax1').parallax({
    background: 'http://ems-framework.e-monsite.com/medias/images/parallax01.jpg',
    height:     '70%',
    scroller:   'parent'
});
$('#parallax2').parallax({
    background: 'http://ems-framework.e-monsite.com/medias/images/parallax02.jpg',
    height:     '50%',
    inertia:    .3,
    posy:       'bottom',
    scroller:   'parent'
});
</script>

Exemple en pleine page

Usage

Via attributs data

Via JavaScript

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

Options

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.

• Partie 1
• Partie 2
• Partie 3
• Partie 4
• Lien externe

<ul class="nav nav-tabs" id="scrollspy-target">
	<li><a href="#part1">Partie 1</a></li>
	...
</ul>
<div data-provide="scrollspy" data-target="#scrollspy-target" >
	<div id="part1">...</div>
	...
</div>

Usage

Via attributs data

Via JavaScript

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

Options

Méthodes

.scrollspy(options)

$('body').scrollspy();

Événements

$('body').on('on.beforeScroll.scrollspy', function(){
    // action…
});

$('#sidebar').find('a').on('on.start.scrollspy', function(){
	// action…
});

• Au dessus
• Au dessous
• À gauche
• À droite

<ul class="list-inline">
	<li><a href="#" data-toggle="tooltip" title="Tooltip au-dessus">Au dessus</a></li>
	<li><a href="#" data-toggle="tooltip" title="Tooltip au dessous" data-position="bottom">Au dessous</a></li>
	<li><a href="#" data-toggle="tooltip" title="Tooltip à gauche" data-position="left">À gauche</a></li>
	<li><a href="#" data-toggle="tooltip" title="Tooltip à droite" data-position="right">À droite</a></li>
</ul>

Relatif à la souris

<p>
	<a href="#" data-toggle="tooltip" title="Tooltip au dessus" data-origin="mouse" data-container="body">Relatif à la souris</a>
</p>

Usage

Via attributs data

Via JavaScript

$('.btn').tooltip();

Options

Méthodes

.tooltip(options)

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

.tooltip('show')

.tooltip('hide')

.tooltip('toggle')

.tooltip('reset')

Événements

$('[data-toggle="tooltip"]').on('on.shown.tooltip', function(){
	// action…
});

$.isMobile()

if($.isMobile())
{
    //it's a mobile terminal
}
else
{
    //it's not a mobile terminal
}

$.browser()

Méthodes

$.browser('version')