Modales modal.js
Exemples
Exemple statique
Exemple
Deprecated: Function create_function() is deprecated in /home/praufkea/bootstrap-doc.prauds.fr/geshi/geshi.php on line 4698
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button> <h4 class="modal-title">Titre de la modale</h4> </div> <div class="modal-body"> <p>Corps de la modale</p> </div> <div class="modal-footer"> <button class="btn btn-primary" type="button"><i class="icon icon-check icon-lg"></i> Valide</button> <button class="btn btn-inverse" type="button" data-dismiss="modal"><i class="icon icon-times icon-lg"></i> Fermer</button> </div> </div> </div> </div>
Exemple fonctionnel
Option de taille
La taille de la modale est sélectionnée automatiquement en fonction du support, mais on peut choisir en plus ce celle par défaut, deux tailles supplémentaires. La classe s'ajoute a modal-dialog.
Couleur
Pour faire des messages d'alert il est possible de mettre une couleur de fond dans l'entête.
<div class="modal fade" id="myModal-success" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header modal-header-success"> ... </div> </div> </div> </div> ...
Utilisation
Via attribut de donnée
Pour activer une modale sans écrire de JavaScript, utilisez l'attribut de donnée data-toggle="modal" sur un élément contrôleur, un bouton par exemple, avec un élément data-target="#myModal" ou href="#myModal" pour cibler une modale spécifique à activer.
<!-- Avec un lien --> <a data-toggle="modal" href="#myModal" class="btn btn-link"> <i class="icon icon-sign-out icon-lg"></i> Lien </a> <!-- Avec un bouton --> <button type="button" data-toggle="modal" class="btn btn-primary" data-target="#myModal"> <i class="icon icon-sign-out icon-lg"></i> Bouton </button>
Via javascript
Activer une modale ayant l'identifiant myModal avec une seule ligne de JavaScript:
$('#myModal').modal(options)
Options
Les options ci-dessous sont utilisable dans le javascript ou en attribut de donnée. Dans le cas d'attribut de donnée, ajouter data- devant, exemple : data-backdrop="".
| Option | type | défaut | description |
|---|---|---|---|
| backdrop | boolean ou static |
true | Affiche l'overlay. La valeur static, désactive la fermeture automatique de la modale par un clique sur l'overlay. |
| keyboard | boolean | true | Active la fermeture de la modale avec la touche ECHAP. |
| show | boolean | true | Affiche la modale quand initialiser. |
| remote | path | false | Si une URL externe est fournie, le contenu sera chargé via la méthode jQuery <a data-toggle="modal" href="remote.html" data-target="#modal">Click ici</a> |
Méthodes
.modal(options)
Déclaration des options.
JQUERY$('#myModal').modal({ backdrop: true | false | 'static', keyboard: true | false, show: true | false, remote: 'remote.html' | false })
.modal('toggle')
Inverse l'état de la modale.
JQUERY$('#myModal').modal('toggle')
.modal('show')
Affiche la modale.
JQUERY$('#myModal').modal('show')
.modal('hide')
Cache la modale.
JQUERY$('#myModal').modal('hide')
Évènements
| Évènement | Description |
|---|---|
| show.bs.modal | Cet évènement est immédiatement exécuté lorsque la méthode show est appelée. |
| shown.bs.modal | Cet évènement est exécuté lorque la modale a été rendue visible à l'utilisateur (mais attendra la fin des transitions css pour se terminer). |
| hide.bs.modal | Cet évènement est immédiatement exécuté lorsque la méthode hide est appelée. |
| hidden.bs.modal | Cet évènement est exécuté lorque la modale est cachée à l'utilisateur (mais attendra la fin des transitions css pour se terminer). |
| loaded.bs.modal | Cet évènement est exécuté lorque la modale charge un contenu d'une URL. |
$('#myModal').on('hidden.bs.modal', function (e) { // faire quelque chose... })
ScrollSpy scrollspy.js
Exemple dans une barre de navigation
Selection automatique du menu avec le défilement du texte
@fat
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
@mdo
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
one
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
two
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
three
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Source
Utilisation
Via attribut de donnée
Pour ajouter facilement un comportement scrollspy à votre barre de navigation, ajoutez simplement l'attribut de donnée data-spy="scroll" à l'élément que vous désirez suivre (typiquement le corps de texte) et l'attribut de donnée data-target="ID ou class" pour sélectionner quel élément de la barre utiliser. Vous pourrez utiliser scrollspy avec un composant .nav.
<nav role="navigation" class="navbar navbar-inverse navbar-static" id="navbar-example"> ... </nav> <div data-offset="0" data-target="#navbar-example" data-spy="scroll"> ... </div>
Via Javascript
Appeler scrollspy via JavaScript.
JQUERY$('div').scrollspy({ target: '.navbar-example' })
Options
Les options ci-dessous sont utilisable dans le javascript ou en attribut de donnée. Dans le cas d'attribut de donnée, ajouter data- devant, exemple : data-offset="".
| Nom | Type | défaut | description |
|---|---|---|---|
| offset | number | 10 | Décalage en pixels par rapport au sommet lors du calcul de position du défilement.. |
Méthodes
.scrollspy('refresh')
Cette méthode permet de rafraichir le scrollspy :
JQUERY$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') });
Évènements
| Évènement | Description |
|---|---|
| activate.bs.scrollspy | Cet évènement est exécuté dès qu'un nouvel élément est activé par scrollspy. |
$('#myScrollspy').on('activate.bs.scrollspy', function () { // faire quelque chose... })
Menu à onglets / boutons tab.js
Exemple
Utilisation
Via attribut de donnée
Pour activer les onglets ou les boutons, ajoutez simplement l'attribut de donnée data-toggle="tab" ou data-toggle="pill" à chaque <li> du menu.
<ul class="nav nav-tabs" id="myTab"> <!-- <ul class="nav nav-pills" id="myTab"> --> <li class="active"><a data-toggle="tab" href="#menu01">Accueil</a></li> <!-- <li class="active"><a data-toggle="pill" href="#menu01">Accueil</a></li> --> <li><a data-toggle="tab" href="#menu02">Messages</a></li> <!-- <li><a data-toggle="pill" href="#menu02">Messages</a></li> --> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" id="myTabDrop1" href="#"> Liste <b class="caret"></b> </a> <ul aria-labelledby="myTabDrop1" role="menu" class="dropdown-menu"> <li><a data-toggle="tab" href="#dropdown01">Texte 1</a></li> <li><a data-toggle="tab" href="#dropdown02">Texte 2</a></li> </ul> </li> </ul> <div class="tab-content" id="myTabContent"> <div id="menu01" class="tab-pane fade active in">...</div> <div id="menu02" class="tab-pane fade">...</div> <div id="dropdown01" class="tab-pane fade">...</div> <div id="dropdown02" class="tab-pane fade">...</div> </div>
Via Javascript
Activer les onglets dynamiques via JavaScript (chaque onglet doit être activé individuellement) :
JQUERY$('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') })
Vous pouvez activer les onglets individuels de plusieurs façons :
JQUERY$('#myTab a[href="#menu01"]').tab('show') // Sélection de l'onglet par le nom $('#myTab a:first').tab('show') // Sélectionne le premier onglet $('#myTab a:last').tab('show') // Sélectionne le dernier onglet $('#myTab li:eq(2) a').tab('show') // Sélectionne le 3ème (indexé à partir de 0)
Effet de transition
Pour créer un effet de transition entre chaque onglets, ajouter la classe fade à tous les tab-pane. Pour initialiser l'effet, ajouter la classe in au premier.
<div class="tab-content" id="myTabContent"> <div id="menu01" class="tab-pane fade active in">...</div> <div id="menu02" class="tab-pane fade">...</div> <div id="dropdown01" class="tab-pane fade">...</div> <div id="dropdown02" class="tab-pane fade">...</div> </div>
Évènements
| Évènement | Description |
|---|---|
| show.bs.tab | Cet évènement est exécuté à l'affichage de l'onglet, mais avant que l'onglet ne soit visible. Utilisez event.target et event.relatedTarget pour cibler l'onglet actif et le précédent onglet actif (si il existe) respectivement. |
| shown.bs.tab | Cet évènement est exécuté à l'affichage de l'onglet après que l'onglet soit devenu visible. Utilisez event.target et event.relatedTarget pour cibler l'onglet actif et le précédent onglet actif (si il existe) respectivement. |
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // onglet activé e.relatedTarget // onglet précédent }) $('a[data-toggle="pill"]').on('shown.bs.tab', function (e) { e.target // onglet activé e.relatedTarget // onglet précédent })
Infobulle tooltip.js
Exemples
Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.
Dans les quatres directions
Ajouter l'attribut de donnée data-placement et définissez la position avec top, bottom, left, right ou auto.
Utilisation
Coté Javascript
Activer les onglets dynamiques via JavaScript (chaque onglet doit être activé individuellement) :
JQUERY$('#example').tooltip(options)
Coté HTML
L'utilisation est assez simple, il suffit d'ajouter l'attribut de donnée data-toggle="tooltip" à ce que vous voulez et title="Texte à afficher" pour définir le texte à afficher. Par défaut, l'infobulle est placer en haut.
<!-- HTML --> <a href="#" data-toggle="tooltip" title="Texte à afficher">Infobulle</a> <!-- Générer par le plugin --> <div class="tooltip top"> <div class="tooltip-inner"> Texte afficher </div> <div class="tooltip-arrow"></div> </div>
Options
Les options ci-dessous sont utilisable dans le javascript ou en attribut de donnée. Dans le cas d'attribut de donnée, ajouter data- devant, exemple : data-animation="".
| Nom | type | Défaut | Description |
|---|---|---|---|
| animation | boolean | true | Applique une transition de type fondu css à l'infobulle |
| html | boolean | false | Permet le code HTML dans l'infobulle. Si false, la méthode JQuery text est utilisée pour insérer le contenu dans le DOM. Utilisez le mode texte si vous craignez les attaques XSS, bien que ces infobulles ne soient pas vraiment sensibles. |
| placement | string | function | 'top' | Positionnement possible de l'infobulle : top | bottom | left | right | auto.Quand auto est spécifié, le positionnement de l'infobulle change dynamiquement. Par exemple, pour une position auto left, l'infobulle s'affichera, si possible à gauche, sinon elle se placera à droite automatiquement. |
| selector | string | false | Si un sélecteur est fourni, les objets infobulle seront délégués aux cibles désignées. |
| template | string | <div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div> |
C'est la base html utilisé à la création de la tooltip. |
| title | string | function | '' | Valeur du titre par défaut si la balise title est absente. |
| trigger | string | 'hover focus' | Mode d'activation de l'infobulle : click | hover | focus | manual. Les modes sont cumulables en les séparent par un espace. |
| delay | number | object | 0 |
Délai en millisecondes pour afficher ou masquer l'infobulle (ms), ne s'applique pas au mode Si un nombre est fourni, le délai est appliqué à l'affichage et au masquage. La strcuture de l'objet est : delay: { show: 500, hide: 100 } |
| container | string | false | false |
Dans le cas de |
| viewport | string | objet | { selector: 'body', padding: 0 } | Maintient l'info-bulle dans les limites de cet élément. Example: viewport: '#viewport' ou { selector: '#viewport', padding: 0 } |
Cas particulier
Ajouter data-container="body" à chaque bouton ou champ du groupe.
Méthodes
$().tooltip(options)
Attache un gestionnaire d'infobulles à un élément.
.tooltip('show')
Affiche l'infobulle d'un élément.
JQUERY$('#element').tooltip('show')
.tooltip('hide')
Masque l'infobulle d'un élément.
JQUERY$('#element').tooltip('hide')
.tooltip('toggle')
Inverse l'état de l'infobulle d'un élément.
JQUERY$('#element').tooltip('toggle')
.tooltip('destroy')
Cache et détruit l'infobulle d'un élément.
JQUERY$('#element').tooltip('destroy')
Évènements
| Évènement | Description |
|---|---|
| show.bs.tooltip | Cet évènement est immédiatement exécuté lorsque la méthode show est appelée. |
| shown.bs.tooltip | Cet évènement est exécuté lorque l'infobulle a été rendue visible à l'utilisateur (mais attendra la fin des transitions css pour se terminer). |
| hide.bs.tooltip | Cet évènement est immédiatement exécuté lorsque la méthode hide est appelée. |
| hidden.bs.tooltip | Cet évènement est exécuté lorque l'infobulle est cachée à l'utilisateur (mais attendra la fin des transitions css pour se terminer). |
$('#myTooltip').on('hidden.bs.tooltip', function () { // faire quelque chose ... })
Popovers popover.js
Exemples
Ajoute de petites incrustations de contenu, semblables à celles de l'iPad®, à tout élément, pour contenir des éléments d'information secondaires. Un popover est similaire à une infobulle, mais avec un design esthétique différent
Exemple statique
Exemple statique
Popover top
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover right
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover bottom
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover left
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Exemple opérationnel
Exemple opérationnel
Dans les quatres directions
Ajouter l'attribut de donnée data-placement et définissez la position avec top, bottom, left, right ou auto.
Utilisation
Coté Javascript
Activer la popover via JavaScript :
JQUERY$('#example').popover(options)
Coté HTML
L'utilisation est assez simple, il suffit d'ajouter l'attribut de donnée data-toggle="popover" à ce que vous voulez, title="Titre de la popover" pour définir le titre et enfin data-content="corps de la popover" pour définir le texte à afficher dans le corps. Par défaut, la popover est placer à droite.
<!-- HTML --> <button data-content="Corps de la popover." data-toggle="popover" data-container="body" class="btn btn-primary" type="button" title="Titre de la popover">Cliquer pour ouvrir</button> <!-- Générer par le plugin --> <div class="popover right"> <div class="arrow"></div> <h3 class="popover-title">Titre de la popover</h3> <div class="popover-content"> <p>Corps de la popover.</p> </div> </div>
Options
Les options ci-dessous sont utilisable dans le javascript ou en attribut de donnée. Dans le cas d'attribut de donnée, ajouter data- devant, exemple : data-animation="".
| Nom | type | Défaut | Description |
|---|---|---|---|
| animation | boolean | true | Applique une transition de type fondu css à la popover |
| html | boolean | false | Permet le code HTML dans la popover. Si false, la méthode JQuery text est utilisée pour insérer le contenu dans le DOM. Utilisez le mode texte si vous craignez les attaques XSS, bien que ces popover ne soient pas vraiment sensibles. |
| placement | string | function | 'right' | Positionnement possible de la popover : top | bottom | left | right | auto.Quand auto est spécifié, le positionnement de la popover change dynamiquement. Par exemple, pour une position auto left, la popover s'affichera, si possible à gauche, sinon elle se placera à droite automatiquement. |
| selector | string | false | Si un sélecteur est fourni, les objets popover seront délégués aux cibles désignées. |
| template | string | <div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div> |
C'est la base html utilisé à la création du popover. |
| trigger | string | 'click' | Mode d'activation du popover : click | hover | focus | manual. |
| title | string | function | '' | Valeur du titre par défaut si la balise title est absente. |
| content | string | function | '' | Valeur du contenu par défaut si la balise data-content est absente. |
| delay | number | object | 0 |
Délai en millisecondes pour afficher ou masquer la popover (ms), ne s'applique pas au mode Si un nombre est fourni, le délai est appliqué à l'affichage et au masquage. La strcuture de l'objet est : delay: { show: 500, hide: 100 } |
| container | string | false | false |
Dans le cas de |
| viewport | string | objet | { selector: 'body', padding: 0 } | Maintient l'info-bulle dans les limites de cet élément. Example: viewport: '#viewport' ou { selector: '#viewport', padding: 0 } |
Cas particulier
Ajouter data-container="body" à chaque bouton ou champ du groupe.
Méthodes
$().popover(options)
Attache un gestionnaire de popover à un élément.
.popover('show')
Affiche la popover d'un élément.
JQUERY$('#element').popover('show')
.popover('hide')
Masque la popover d'un élément.
JQUERY$('#element').popover('hide')
.popover('toggle')
Inverse l'état de la popover d'un élément.
JQUERY$('#element').popover('toggle')
.popover('destroy')
Cache et détruit la popover d'un élément.
JQUERY$('#element').popover('destroy')
Évènements
| Évènement | Description |
|---|---|
| show.bs.popover | Cet évènement est immédiatement exécuté lorsque la méthode show est appelée. |
| shown.bs.popover | Cet évènement est exécuté lorque la popover a été rendue visible à l'utilisateur (mais attendra la fin des transitions css pour se terminer). |
| hide.bs.popover | Cet évènement est immédiatement exécuté lorsque la méthode hide est appelée. |
| hidden.bs.popover | Cet évènement est exécuté lorque la popover est cachée à l'utilisateur (mais attendra la fin des transitions css pour se terminer). |
$('#myPopover').on('hidden.bs.popover', function () { // faire quelque chose ... })
Message d'alerte alert.js
Exemple
Utilisation
Coté HTML
Quand la classe alert-dismissable est ajoutée, le bouton pour fermer est automatiquement ajouter à l'alerte.
<div class="alert alert-success alert-dismissable fade in"> <i class="icon icon-check-circle icon-lg"></i> <strong>Succès !</strong> message de reussite. </div> <!-- Générer par le plugin quand la classe alert-dismissable est ajoutée --> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Coté Javascript
Activer la fermeture des alertes via JavaScript
JQUERY$(".alert").alert()
Méthodes
$().alert()
Active le mode fermeture sur toutes les alertes. Pour que vos alertes soient animées à la fermeture, vérifiez que les classes .fade et .in leur soient appliquées.
.alert('close')
Ferme une alerte.
JQUERY$(".alert").alert('close')
Évènements
| Évènement | Description |
|---|---|
| close.bs.alert | Cet évènement est immédiatement exécuté lorsque la méthode close est appelée. |
| closed.bs.alert | Cet évènement est exécuté lorsque when l'alerte a été fermée (mais attendra la fin de la transition CSS pour se terminer). |
$('#my-alert').bind('closed.bs.alert', function () { // Faire quelque chose ... })
Bouton button.js
Exemple
Utilisez au mieux vos boutons. Le contrôle des états de boutons ou la création de groupes de boutons ouvrent la voie à la création simple de barres d'outils.
Etat de chargement
Ajoutez data-loading-text="Chargement..." pour obtenir un état de chargement sur un bouton.
Bouton checkbox
Ajoutez data-toggle="button" pour obtenir le bouton checkbox.
Groupe de boutons checkbox
Ajouter data-toggle="buttons" pour avoir une sélection façon case à cocher sur un groupe de boutons btn-group.
Groupe de boutons radio
Ajouter data-toggle="buttons" pour avoir une sélection façon bouton radio sur un groupe de boutons btn-group.
Utilisation
Via attribut de donnée
Bouton d'état de chargement
Pour activer le bouton d'état de chargement, ajouter data-loading-text="Chargement..." et le code jquery.
<button class="btn btn-primary" data-loading-text="Chargement..." id="fat-btn" type="button">Etat de chargement</button>
Bouton checkbox
Pour activer le bouton checkbox, ajouter data-toggle="button"
<button type="button" class="btn btn-primary" data-toggle="button">Checkbox bouton</button>
Groupe de boutons checkbox
Pour activer le groupe de boutons checkbox, ajouter data-toggle="buttons"
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="checkbox"> Option 1 </label> <label class="btn btn-primary"> <input type="checkbox"> Option 2 </label> <label class="btn btn-primary"> <input type="checkbox"> Option 3 </label> </div>
Groupe de boutons radio
Pour activer le groupe de boutons radio, ajouter data-toggle="button"
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options" id="option1"> Option 1 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> Option 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3"> Option 3 </label> </div>
Via javascript
Activer les boutons via JavaScript
HTML$('.btn').button()
Méthodes
$().button('toggle')
Commute l'état poussé du bouton. Donne au bouton son apparence activé.
$().button('loading')
Passe le bouton en état chargement - désactive le bouton et change le texte par le texte de chargement. Le texte de chargement doit être défini sur l'élément bouton avec l'attribut de donnée data-loading-text.
autocomplete="off".<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="Chargement en cours...">...</button> <script> $('#loading-example-btn').click(function () { var btn = $(this); btn.button('loading'), setTimeout(function () { btn.button('reset') }, 3000) }) </script>
$().button('reset')
Réinititialise l'état du bouton - réaffiche le texte d'origine.
$().button(string)
Réinititialise l'état du bouton - remplace le texte par celui défini en attribut de donnée.
JQUERY<button type="button" class="btn btn-primary" data-complete-text="Terminé!" >...</button> <script> $('.btn').button('complete') </script>
Collapse collapse.js
Exemple
En utilisant le plugin collapse, nous pouvons construire un accordéon simple.
Vous pouvez également utiliser le plugin sans les marqueurs accordéon. Créez un bouton qui gèrera l'ouverture et la fermeture d'un élément.
<button type="button" class="btn btn-inverse" data-toggle="collapse" data-target="#demo">Cacher le texte</button> <div id="demo" class="collapse in">texte d'exemple</div>
Déclinaison de couleurs
Utilisation
Le plugin collapse utilise quelques classe pour manipuler les éléments :
-
.collapseferme l'élément. -
.collapse.inouvre l'élement. -
.collapsingest ajoutée quand la transformation commence, et supprimer quand l'animation est finie.
Via attribut de donnée
Ajoutez les attributs de données data-toggle="collapse" et data-target à un élément pour lui assigner automatiquement le contrôle d'un élément. L'attribut de donnée data-target accepte un sélecteur CSS à appliquer à l'élément. Ajoutez obligatoirement la classe collapse à l'élément contrôlé. Si vous souhaitez avoir un élément ouvert par défaut, ajoutez lui la classe in.
Pour ajouter une gestion de groupe accordéon à un contrôle, ajoutez l'attribut de donnée data-parent="#selector". Voyez l'exemple pour plus de détails.
Via javascript
Activez manuellement par :
JQUERY$('.collapse').collapse()
Options
Les options peuvent être passées via les attributs de données ou via JavaScript. Pour les attributs de données, ajoutez le nom de l'option à un attribut de donnée data-, par exemple data-parent="".
| Nom | Type | Défaut | Description |
|---|---|---|---|
| parent | selector | false | S'il y a un sélecteur, tous les éléments controlés sous le parent précisé seront fermés lorsque que le parent est fermer. (comportement identique à l'accordéon traditionnel) |
| toggle | booléen | true | Commute l'élément désigné sur invocation |
Méthodes
.collapse(options)
Active votre contenu en tant qu'éléments controlés. Accepte une éventuelle option object.
$('#myCollapsible').collapse({ toggle: false })
.collapse('toggle')
Commute un élément controlé à ouvert/fermer.
.collapse('show')
Ouvre un élément controlé.
.collapse('hide')
Ferme un élément controlé.
Évènements
| Évènement | Description |
|---|---|
| show.bs.collapse | Cet évènement est exécuté immédiatement lorsque la méthode show est appelée. |
| shown.bs.collapse | Cet évènement est exécuté lorsqu'un élément controlé est rendu visible à l'utilisateur (attend la fin des transitions CSS pour se terminer). |
| hide.bs.collapse | Cet évènement est exécuté immédiatement lorsque la méthode hide est appelée. |
| hidden.bs.collapse | Cet évènement est exécuté lorsqu'un élément controlé est caché à l'utilisateur (attend la fin des transitions CSS pour se terminer). |
$('#myCollapsible').on('hidden.bs.collapse', function () { // Faire quelque chose ... })
Carousel carousel.js
Exemples
Le diaporama ci-dessous montre un plugin générique et son composant Bootstrap pour naviguer entre des éléments à la manière d'un carousel.
Option image avec légende
Ajouter des légendes à vos diapositives facilement en ajoutant un div avec la classe carousel-caption, dans les item.
Utilisation
Plusieurs carousels
Dans le cas de plusieurs carousels dans la même page, ajouter un id à chaque carousel, et affecter cet id aux controleurs correspondants.
Via attribut de donnée
Utilisez les attributs de données pour contrôler facilement la position du carrousel. L'attribut de donnée data-slide accepte les valeurs prev et next, pour déplacer les diapositives par rapport à sa position actuelle. Vous pouvez également utiliser l'attribut de donnée data-slide-to pour passer l'index de la diapositive à attendre data-slide-to="2", sachant que l'index commence par 0.
L'attribut de donnée data-ride="carousel" permet d'activer le défilement automatique du carousel.
Via Javascript
Appeler le carrousel manuellement par :
JQUERY$('.carousel').carousel()
Options
Les options peuvent être passées via les attributs de données ou via JavaScript. Pour les attributs de données de données, ajoutez le nom de l'option à un attribut de donnée data-, par exemple data-interval="".
| Nom | Type | Défaut | Description |
|---|---|---|---|
| interval | number | 5000 | Le délai en millisecondes entre le changement de vue. Si false, le carrousel ne sera pas animé, mais contrôlé par l'utilisateur. |
| pause | string | "hover" | Met en pause le cycle du carrousel au survol de la souris et le reprend lorsque la souris quitte la zone. |
| wrap | boolean | true | Activer par défaut, cette option permet au carousel de revenir à la première image après la dernière et inversement. |
Méthodes
.carousel(options)
Initialise le carrousel avec optionnellement un object et lance la vue cyclique entre les éléments.
$('.carousel').carousel({ interval: 2000 })
.carousel('cycle')
Joue en cycle les éléments du carrousel de gauche à droite.
.carousel('pause')
Met le cycle en pause.
.carousel(number)
Joue en cycle le carrousel jusqu'à un élément particulier (base 0, comme pour un tableau).
.carousel('prev')
Affiche l'élément précédent.
.carousel('next')
Affiche l'élément suivant.
Évènements
| Évènement | Description |
|---|---|
| slide.bs.carousel | Cet évènement est immédiatement activé dès que la méthode slide est appelée. |
| slid.bs.carousel | Cet évènement est activé quand le carrousel a terminé une transition entre vues. |
$('#myCarousel').on('slide.bs.carousel', function () { // Faire quelque chose ... })