Javascript pour Bootstrap

Donnez vie aux composants de Bootstrap, désormais avec 12 plugins jQuery personnalisés.

Modaux

Une version simplifiée, mais flexible, du plug-in modal javascript traditionnel avec uniquement les fonctionnalités minimales requises et les valeurs par défaut intelligentes.

Listes déroulantes

Ajoutez des menus déroulants à presque tout dans Bootstrap avec ce plugin simple. Bootstrap propose une prise en charge complète du menu déroulant dans la barre de navigation, les onglets et les pilules.

Scrollspy

Utilisez scrollspy pour mettre à jour automatiquement les liens dans votre barre de navigation pour afficher le lien actif actuel en fonction de la position de défilement.

Onglets basculables

Utilisez ce plugin pour rendre les onglets et les pilules plus utiles en leur permettant de basculer entre les volets tabulables du contenu local.

Info-bulles

Une nouvelle version du plugin jQuery Tipsy, les info-bulles ne reposent pas sur des images - elles utilisent CSS3 pour les animations et les attributs de données pour le stockage local des titres.

Popovers *

Ajoutez de petites superpositions de contenu, comme celles de l'iPad, à n'importe quel élément pour héberger des informations secondaires.

* Nécessite que les info- bulles soient incluses

Messages d'alerte

Le plugin d'alerte est une petite classe permettant d'ajouter des fonctionnalités proches aux alertes.

Boutons

Faites-en plus avec les boutons. Contrôlez les états des boutons ou créez des groupes de boutons pour plus de composants comme les barres d'outils.

Effondrement

Obtenez des styles de base et une prise en charge flexible des composants pliables tels que les accordéons et la navigation.

Carrousel

Créez un manège de tout contenu que vous souhaitez fournir un diaporama interactif de contenu.

Taper à l'avance

Un plug-in de base facilement extensible pour créer rapidement des saisies de texte élégantes avec n'importe quelle entrée de texte de formulaire.

Transitions *

Pour des effets de transition simples, incluez bootstrap-transition.js une fois pour faire glisser les modaux ou faire disparaître les alertes.

* Requis pour l'animation dans les plugins

La tête haute! Tous les plugins javascript nécessitent la dernière version de jQuery.

À propos des modaux

Une version simplifiée, mais flexible, du plug-in modal javascript traditionnel avec uniquement les fonctionnalités minimales requises et les valeurs par défaut intelligentes.

Télécharger un fichier

Exemple statique

Ci-dessous se trouve un modal rendu statiquement.

Démo en direct

Basculer un modal via javascript en cliquant sur le bouton ci-dessous. Il glissera vers le bas et s'estompera à partir du haut de la page.

Lancer la démo modale

Utiliser bootstrap-modal

Appelez le modal via javascript :

  1. $ ( '#monModal' ). modale ( options )

Choix

Nom taper défaut la description
toile de fond booléen vrai Inclut un élément modal-backdrop. Vous pouvez également spécifier staticun fond qui ne ferme pas le modal au clic.
clavier booléen vrai Ferme le modal lorsque la touche d'échappement est enfoncée
Afficher booléen vrai Affiche le modal lorsqu'il est initialisé.

Balisage

Vous pouvez facilement activer les modaux sur votre page sans avoir à écrire une seule ligne de javascript. Il suffit de définir data-toggle="modal"un élément de contrôleur avec un data-target="#foo"ou href="#foo"qui correspond à un identifiant d'élément modal, et une fois cliqué, il lancera votre modal.

De plus, pour ajouter des options à votre instance modale, incluez-les simplement en tant qu'attributs de données supplémentaires sur l'élément de contrôle ou le balisage modal lui-même.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Lancer Modal </a>
  1. <div class = "masque modal" id = "monModal" >
  2. <div class = "en-tête-modal" >
  3. < type de bouton = "bouton" class = "fermer" data-dismiss = "modal" > × </bouton>
  4. <h3> En-tête modal </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Un beau corps… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Fermer </a>
  11. <a href = "#" class = "btn btn-primary" > Enregistrer les modifications </a>
  12. </div>
  13. </div>
La tête haute! Si vous voulez que votre modal s'anime à l'intérieur et à l'extérieur, ajoutez simplement une .fadeclasse à l' .modalélément (reportez-vous à la démo pour voir cela en action) et incluez bootstrap-transition.js.

Méthodes

.modal(options)

Active votre contenu en tant que modal. Accepte une option facultative object.

  1. $ ( '#monModal' ). modale ({
  2. clavier : faux
  3. })

.modal('basculer')

Bascule manuellement un modal.

  1. $ ( '#monModal' ). modal ( 'basculer' )

.modal('montrer')

Ouvre manuellement un modal.

  1. $ ( '#monModal' ). modal ( 'montrer' )

.modal('masquer')

Masque manuellement un modal.

  1. $ ( '#monModal' ). modal ( 'cacher' )

Événements

La classe modale de Bootstrap expose quelques événements pour se connecter à la fonctionnalité modale.

Événement La description
Afficher Cet événement se déclenche immédiatement lorsque la showméthode d'instance est appelée.
montré Cet événement est déclenché lorsque le modal a été rendu visible à l'utilisateur (il attendra que les transitions CSS soient terminées).
cacher Cet événement est déclenché immédiatement lorsque la hideméthode d'instance a été appelée.
caché Cet événement est déclenché lorsque le modal a fini d'être caché à l'utilisateur (il attendra que les transitions CSS soient terminées).
  1. $ ( '#monModal' ). on ( 'caché' , fonction () {
  2. // faire quelque chose…
  3. })

Le plugin ScrollSpy permet de mettre à jour automatiquement les cibles de navigation en fonction de la position de défilement.

Télécharger un fichier

Exemple de barre de navigation avec scrollspy

Faites défiler la zone ci-dessous et regardez la mise à jour de la navigation. Les sous-éléments de la liste déroulante seront également mis en surbrillance. Essayez-le !

@gros

Ad leggings keytar, brunch id art party dolor labore. Pitchfork an enim lo-fi avant qu'ils ne soient épuisés. Tumblr des droits de vélo de la ferme à la table, peu importe. Cardigan Anim keffieh carles. Le photomaton de Velit seitan mcsweeney 3 wolf moon irure. Cosby pull lomo jean shorts, williamsburg hoodie minim dont vous n'avez probablement pas entendu parler et cardigan trust fund culpa biodiesel wes anderson esthétique. Nihil accusamus tatoué, credo ironie biodiesel keffieh artisan ullamco consequat.

@mdo

Planche à roulettes à moustache Veniam marfa, barbe à fourche adipisicing fugiat velit. Freegan beard aliqua cupidatat vero de mcsweeney. Cupidatat quatre loko nisi, ea helvetica nulla carles. Camion de nourriture de pull cosby tatoué, vinyle non freegan de mcsweeney's quis. Lo-fi wes anderson +1 vestimentaire. Carles exercitation non esthétique qui s'embourgeoise. Brooklyn adipisicing bière artisanale vice keytar deserunt.

une

Occaecat commodo aliqua delectus. Planche à roulettes Fap Craft Beer Deserunt ea. Droits de bicyclette Lomo adipisicing banh mi, velit ea sunt café d'origine unique locavore de niveau supérieur dans 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, sac banane durable delectus consectetur iphone.

deux

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, sac messager culpa marfa quel que soit le food truck délectus. Sapiente synth id assumenda. Locavore sed helvetica cliché ironie, Thundercats vous n'avez probablement pas entendu parler d'eux consequat hoodie sans gluten lo-fi fap aliquip. Labore elit placeat avant qu'ils ne soient épuisés, terry richardson proident brunch nesciunt quis cosby pull pariatur keffiyeh ut helvetica artisan. Cardigan bière artisanale seitan prêt à l'emploi velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco Thundercats.


Utilisation de bootstrap-scrollspy.js

Appelez le scrollspy via javascript :

  1. $ ( '#barre de navigation' ). parcheminespion ()

Balisage

Pour ajouter facilement un comportement scrollspy à votre navigation dans la barre supérieure, ajoutez simplement data-spy="scroll"l'élément que vous souhaitez espionner (le plus souvent, il s'agit du corps).

  1. <body data-spy = "scroll" > ... </body>
La tête haute! Les liens de la barre de navigation doivent avoir des cibles d'ID résolubles. Par exemple, un <a href="#home">home</a>must correspond à quelque chose dans le dom comme <div id="home"></div>.

Méthodes

.scrollspy('actualiser')

Lorsque vous utilisez scrollspy en conjonction avec l'ajout ou la suppression d'éléments du DOM, vous devrez appeler la méthode refresh comme ceci :

  1. $ ( '[data-spy="scroll"]' ). chaque ( fonction () {
  2. var $espion = $ ( ceci ). scrollspy ( 'actualiser' )
  3. });

Choix

Nom taper défaut la description
décalage Numéro dix Pixels à décaler du haut lors du calcul de la position du défilement.

Événements

Événement La description
Activer Cet événement se déclenche chaque fois qu'un nouvel élément est activé par le scrollspy.

Ce plugin ajoute une fonctionnalité rapide et dynamique d'onglets et de pilules pour la transition vers le contenu local.

Télécharger un fichier

Exemples d'onglets

Cliquez sur les onglets ci-dessous pour basculer entre les volets masqués, même via les menus déroulants.

Denim brut, vous n'avez probablement pas entendu parler d'eux shorts en jean Austin. Nesciunt tofu sumptown aliqua, nettoyage de maître de synthé rétro. Moustache cliché tempor, williamsburg carles vegan helvetica. Reprehenderit boucher rétro keffieh dreamcatcher synthé. Cosby pull eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, boucher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Utilisation de bootstrap-tab.js

Activer les onglets tabulables via javascript (chaque onglet doit être activé individuellement) :

  1. $ ( '#myTab a' ). cliquez sur ( fonction ( e ) {
  2. e . preventDefault ();
  3. $ ( ceci ). onglet ( 'afficher' );
  4. })

Vous pouvez activer des onglets individuels de plusieurs manières :

  1. $ ( '#myTab a[href="#profile"]' ). onglet ( 'afficher' ); // Sélectionner l'onglet par nom
  2. $ ( '#myTab a:first' ). onglet ( 'afficher' ); // Sélectionner le premier onglet
  3. $ ( '#myTab a:last' ). onglet ( 'afficher' ); // Sélectionner le dernier onglet
  4. $ ( '#myTab li:eq(2) a' ). onglet ( 'afficher' ); // Sélectionne le troisième onglet (indexé à 0)

Balisage

Vous pouvez activer une navigation par onglets ou pilules sans écrire de javascript en spécifiant simplement data-toggle="tab"ou data-toggle="pill"sur un élément. L'ajout des classes navet à l'onglet appliquera le style de l'onglet bootstrap.nav-tabsul

  1. <ul class = "nav nav-onglets" >
  2. <li><a href = "#home" data-toggle = "tab" > Accueil </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Messagerie </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Paramètres </a></li>
  6. </ul>

Méthodes

$().tab

Active un élément d'onglet et un conteneur de contenu. L'onglet doit avoir un data-targetou un hrefciblant un nœud de conteneur dans le DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Accueil </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Messagerie </a></li>
  5. <li><a href = "#settings" > Paramètres </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profil" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "paramètres" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( fonction () {
  17. $ ( '#myTab a:last' ). onglet ( 'afficher' );
  18. })
  19. </script>

Événements

Événement La description
Afficher Cet événement se déclenche lors de l'affichage de l'onglet, mais avant l'affichage du nouvel onglet. Utilisez event.targetet event.relatedTargetpour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
montré Cet événement se déclenche lors de l'affichage d'un onglet après l'affichage d'un onglet. Utilisez event.targetet event.relatedTargetpour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'montré' , fonction ( e ) {
  2. e . cible // onglet activé
  3. e . relatedTarget // onglet précédent
  4. })

À propos des info-bulles

Inspiré de l'excellent plugin jQuery.tipsy écrit par Jason Frame ; Les info-bulles sont une version mise à jour, qui ne repose pas sur des images, utilise css3 pour les animations et les attributs de données pour le stockage local des titres.

Télécharger un fichier

Exemple d'utilisation des info-bulles

Passez la souris sur les liens ci-dessous pour afficher les info-bulles :

Pantalons serrés de niveau supérieur keffieh dont vous n'avez probablement pas entendu parler. Photomaton beard raw denim letterpress vegan messenger bag sumptown. Du seitan de la ferme à la table, les vêtements américains fixie quinoa 8 bits durables de mcsweeney ont un chambray en vinyle terry richardson. Beard Stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, quatre loko mcsweeney's clean chambray végétalien. Un artisan vraiment ironique quel que soit le keytar , Scenester farm-to-table banksy Austin twitter handle freegan cred denim brut café d'origine unique viral.


Utilisation de bootstrap-tooltip.js

Déclenchez l'infobulle via javascript :

  1. $ ( '#exemple' ). info -bulle ( options )

Choix

Nom taper défaut la description
animation booléen vrai appliquer une transition de fondu css à l'info-bulle
placement chaîne|fonction 'Haut' comment positionner l'infobulle - top | bas | gauche | droit
sélecteur chaîne de caractères faux Si un sélecteur est fourni, les objets d'info-bulle seront délégués aux cibles spécifiées.
Titre chaîne | fonction '' valeur de titre par défaut si la balise `title` n'est pas présente
gâchette chaîne de caractères 'flotter' comment l'info-bulle est déclenchée - survolez | concentrer | manuel
retard nombre | objet 0

retarder l'affichage et le masquage de l'info-bulle (ms) - ne s'applique pas au type de déclenchement manuel

Si un nombre est fourni, un délai est appliqué à la fois pour masquer/afficher

La structure de l'objet est :delay: { show: 500, hide: 100 }

La tête haute! Les options des info-bulles individuelles peuvent également être spécifiées via l'utilisation d'attributs de données.

Balisage

Pour des raisons de performances, les API de données Tooltip et Popover sont opt-in. Si vous souhaitez les utiliser, spécifiez simplement une option de sélection.

  1. <a href = "#" rel = "tooltip" title = "first tooltip" > passez la souris sur moi </a>

Méthodes

$().info-bulle(options)

Attache un gestionnaire d'info-bulles à une collection d'éléments.

.tooltip('montrer')

Révèle l'info-bulle d'un élément.

  1. $ ( '#élément' ). info -bulle ( 'afficher' )

.tooltip('masquer')

Masque l'info-bulle d'un élément.

  1. $ ( '#élément' ). info -bulle ( 'masquer' )

.tooltip('basculer')

Bascule l'info-bulle d'un élément.

  1. $ ( '#élément' ). info -bulle ( 'basculer' )

À propos des popovers

Ajoutez de petites superpositions de contenu, comme celles de l'iPad, à n'importe quel élément pour héberger des informations secondaires.

* Nécessite l'inclusion d' une info- bulle

Télécharger un fichier

Exemple de popover de survol

Survolez le bouton pour déclencher le popover.


Utiliser bootstrap-popover.js

Activer les popovers via javascript :

  1. $ ( '#exemple' ). popover ( options )

Choix

Nom taper défaut la description
animation booléen vrai appliquer une transition de fondu css à l'info-bulle
placement chaîne|fonction 'droit' comment positionner le popover - top | bas | gauche | droit
sélecteur chaîne de caractères faux si un sélecteur est fourni, les objets d'info-bulle seront délégués aux cibles spécifiées
gâchette chaîne de caractères 'flotter' comment l'info-bulle est déclenchée - survolez | concentrer | manuel
Titre chaîne | fonction '' valeur de titre par défaut si l'attribut `title` n'est pas présent
contenu chaîne | fonction '' valeur de contenu par défaut si l'attribut `data-content` n'est pas présent
retard nombre | objet 0

délai d'affichage et de masquage du popover (ms) - ne s'applique pas au type de déclenchement manuel

Si un nombre est fourni, un délai est appliqué à la fois pour masquer/afficher

La structure de l'objet est :delay: { show: 500, hide: 100 }

La tête haute! Les options pour les popovers individuels peuvent également être spécifiées via l'utilisation d'attributs de données.

Balisage

Pour des raisons de performances, les API de données Tooltip et Popover sont opt-in. Si vous souhaitez les utiliser, spécifiez simplement une option de sélection.

Méthodes

$().popover(options)

Initialise les popovers pour une collection d'éléments.

.popover('montrer')

Révèle un popover d'éléments.

  1. $ ( '#élément' ). popover ( 'montrer' )

.popover('masquer')

Masque un popover d'éléments.

  1. $ ( '#élément' ). popover ( 'cacher' )

.popover('basculer')

Bascule un popover d'éléments.

  1. $ ( '#élément' ). popover ( 'basculer' )

À propos des alertes

Le plugin d'alerte est une petite classe permettant d'ajouter des fonctionnalités proches aux alertes.

Télécharger

Exemples d'alertes

Le plugin d'alertes fonctionne sur les messages d'alerte réguliers et bloque les messages.

Sacré guacamole ! Tu ferais mieux de vérifier toi-même, tu n'as pas l'air trop bien.

Oh claquement ! Vous avez une erreur !

Changez ceci et cela et réessayez. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Effectuez cette action Ou fais ça


Utilisation de bootstrap-alert.js

Activer le rejet d'une alerte via javascript :

  1. $ ( ".alerte" ). alerte ()

Balisage

Ajoutez simplement data-dismiss="alert"à votre bouton de fermeture pour donner automatiquement une fonctionnalité de fermeture d'alerte.

  1. <a class = "close" data-dismiss = "alert" href = "#" > × </a>

Méthodes

$().alerte()

Enveloppe toutes les alertes avec une fonctionnalité proche. Pour que vos alertes s'animent lorsqu'elles sont fermées, assurez-vous que la .fadeet la .inclasse leur sont déjà appliquées.

.alerte('fermer')

Ferme une alerte.

  1. $ ( ".alerte" ). alerte ( 'fermer' )

Événements

La classe d'alerte de Bootstrap expose quelques événements pour se connecter à la fonctionnalité d'alerte.

Événement La description
proche Cet événement se déclenche immédiatement lorsque la closeméthode d'instance est appelée.
fermé Cet événement est déclenché lorsque l'alerte a été fermée (attendra que les transitions CSS soient terminées).
  1. $ ( '#mon-alerte' ). lier ( 'fermé' , fonction () {
  2. // faire quelque chose…
  3. })

À propos de

Faites-en plus avec les boutons. Contrôlez les états des boutons ou créez des groupes de boutons pour plus de composants comme les barres d'outils.

Télécharger un fichier

Exemples d'utilisations

Utilisez le plugin de boutons pour les états et les bascules.

Avec état
Bascule unique
Case à cocher
Radio

Utilisation de bootstrap-button.js

Activer les boutons via javascript :

  1. $ ( '.nav-tabs' ). bouton ()

Balisage

Les attributs de données font partie intégrante du plugin de bouton. Consultez l'exemple de code ci-dessous pour les différents types de balisage.

  1. <!-- Ajoutez data-toggle="button" pour activer le basculement sur un seul bouton -->
  2. <button class = "btn" data-toggle = "button" > Bascule unique </button>
  3.  
  4. <!-- Ajouter data-toggle="buttons-checkbox" pour basculer le style de case à cocher sur btn-group -->
  5. <div class = "btn-group" data-toggle = "boutons-case à cocher" >
  6. <button class = "btn" > Gauche </button>
  7. <button class = "btn" > Milieu </button>
  8. <button class = "btn" > Droite </button>
  9. </div>
  10.  
  11. <!-- Ajouter data-toggle="buttons-radio" pour basculer le style radio sur btn-group -->
  12. <div class = "btn-group" data-toggle = "boutons-radio" >
  13. <button class = "btn" > Gauche </button>
  14. <button class = "btn" > Milieu </button>
  15. <button class = "btn" > Droite </button>
  16. </div>

Méthodes

$().bouton('basculer')

Bascule l'état de poussée. Donne au bouton l'apparence qu'il a été activé.

La tête haute! Vous pouvez activer le basculement automatique d'un bouton à l'aide de l' data-toggleattribut.
  1. <bouton class = "btn" data-toggle = "bouton" > </bouton>

$().bouton('chargement')

Définit l'état du bouton sur chargement - désactive le bouton et remplace le texte par le texte de chargement. Le texte de chargement doit être défini sur l'élément de bouton à l'aide de l'attribut data data-loading-text.

  1. <button class = "btn" data-loading-text = "loading stuff..." > ... </button>
La tête haute! Firefox conserve l'état désactivé à travers les chargements de page . Une solution de contournement consiste à utiliser autocomplete="off".

$().bouton('réinitialiser')

Réinitialise l'état du bouton - remplace le texte par le texte d'origine.

$().bouton(chaîne)

Réinitialise l'état du bouton - remplace le texte par n'importe quel état de texte défini par les données.

  1. <bouton class = "btn" data-complete-text = "terminé !" > ... </bouton>
  2. <script>
  3. $ ( '.btn' ). bouton ( 'complet' )
  4. </script>

À propos de

Obtenez des styles de base et une prise en charge flexible des composants pliables tels que les accordéons et la navigation.

Télécharger un fichier

* Nécessite l'inclusion du plugin Transitions.

Exemple d'accordéon

En utilisant le plugin collapse, nous avons construit un simple widget de style accordéon :

Anim pariatur cliché reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, brunch dolor skateboard non cupidatat. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua met un oiseau dessus calamar café d'origine unique nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, bière artisanale labore wes anderson cred nesciunt sapiente ea proident. Annonce vegan excepteur boucher vice lomo. Leggings occaecat bière artisanale de la ferme à la table, synthé esthétique denim brut dont vous n'avez probablement pas entendu parler accusamus labore VHS durable.
Anim pariatur cliché reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, brunch dolor skateboard non cupidatat. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua met un oiseau dessus calamar café d'origine unique nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, bière artisanale labore wes anderson cred nesciunt sapiente ea proident. Annonce vegan excepteur boucher vice lomo. Leggings occaecat bière artisanale de la ferme à la table, synthé esthétique denim brut dont vous n'avez probablement pas entendu parler accusamus labore VHS durable.
Anim pariatur cliché reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, brunch dolor skateboard non cupidatat. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua met un oiseau dessus calamar café d'origine unique nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, bière artisanale labore wes anderson cred nesciunt sapiente ea proident. Annonce vegan excepteur boucher vice lomo. Leggings occaecat bière artisanale de la ferme à la table, synthé esthétique denim brut dont vous n'avez probablement pas entendu parler accusamus labore VHS durable.

Utilisation de bootstrap-collapse.js

Activer via javascript :

  1. $ ( ".collapse" ). s'effondrer ()

Choix

Nom taper défaut la description
parent sélecteur faux Si sélecteur alors tous les éléments réductibles sous le parent spécifié seront fermés lorsque cet élément réductible est affiché. (similaire au comportement d'accordéon traditionnel)
basculer booléen vrai Bascule l'élément réductible à l'appel

Balisage

Ajoutez simplement data-toggle="collapse"un data-targetélément à pour attribuer automatiquement le contrôle d'un élément pliable. L' data-targetattribut accepte un sélecteur CSS auquel appliquer le repli. Assurez-vous d'ajouter la classe collapseà l'élément réductible. Si vous souhaitez qu'il soit ouvert par défaut, ajoutez la classe supplémentaire in.

  1. <bouton class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. pliable simple
  3. </bouton>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
La tête haute! Pour ajouter une gestion de groupe en accordéon à un contrôle réductible, ajoutez l'attribut data data-parent="#selector". Reportez-vous à la démo pour voir cela en action.

Méthodes

.collapse(options)

Active votre contenu en tant qu'élément pliable. Accepte une option facultative object.

  1. $ ( '#myCollapsible' ). s'effondrer ({
  2. bascule : faux
  3. })

.collapse('basculer')

Bascule un élément réductible sur affiché ou masqué.

.collapse('montrer')

Affiche un élément réductible.

.collapse ('masquer')

Masque un élément pliable.

Événements

La classe d'effondrement de Bootstrap expose quelques événements pour se connecter à la fonctionnalité d'effondrement.

Événement La description
Afficher Cet événement se déclenche immédiatement lorsque la showméthode d'instance est appelée.
montré Cet événement est déclenché lorsqu'un élément de repli a été rendu visible à l'utilisateur (il attendra que les transitions CSS soient terminées).
cacher Cet événement est déclenché immédiatement lorsque la hideméthode a été appelée.
caché Cet événement est déclenché lorsqu'un élément de repli a été masqué à l'utilisateur (il attendra que les transitions CSS soient terminées).
  1. $ ( '#myCollapsible' ). on ( 'caché' , fonction () {
  2. // faire quelque chose…
  3. })

À propos de

Un plug-in de base facilement extensible pour créer rapidement des saisies de texte élégantes avec n'importe quelle entrée de texte de formulaire.

Télécharger un fichier

Exemple

Commencez à taper dans le champ ci-dessous pour afficher les résultats dactylographiés.


Utilisation de bootstrap-typeahead.js

Appelez la frappe via javascript :

  1. $ ( '.typeahead' ). taper à l'avance ()

Choix

Nom taper défaut la description
la source déployer [ ] La source de données à interroger.
éléments Numéro 8 Le nombre maximum d'éléments à afficher dans la liste déroulante.
matcher fonction insensible à la casse Méthode utilisée pour déterminer si une requête correspond à un élément. Accepte un seul argument, itempar rapport auquel tester la requête. Accéder à la requête en cours avec this.query. Renvoie un booléen truesi la requête est une correspondance.
trieur fonction correspondance exacte,
sensible à la casse,
insensible à la casse
Méthode utilisée pour trier les résultats de la saisie semi-automatique. Accepte un seul argument itemset a la portée de l'instance typée. Référencez la requête en cours avec this.query.
surligneur fonction met en surbrillance toutes les correspondances par défaut Méthode utilisée pour mettre en évidence les résultats de la saisie semi-automatique. Accepte un seul argument itemet a la portée de l'instance typée. Devrait retourner html.

Balisage

Ajoutez des attributs de données pour enregistrer un élément avec la fonctionnalité de saisie anticipée.

  1. < type d'entrée = "texte" data-provide = "typeahead" >

Méthodes

.typeahead (options)

Initialise une entrée avec une saisie anticipée.