Notre plugin Modal est une version ultra mince du plugin js modal traditionnel, en prenant un soin particulier à n'inclure que les fonctionnalités nues dont nous avons besoin ici sur Twitter.

Télécharger

Utiliser bootstrap-modal

$ ( '#mon-modal' ). modale ( options )

Choix

Nom	taper	défaut	la description
toile de fond	booléen, chaîne	faux	Inclut un élément modal-backdrop. Définissez toile de fond sur "static"si vous ne voulez pas que le modal soit fermé lorsque vous cliquez sur la toile de fond.
clavier	booléen	faux	Ferme le modal lorsque la touche d'échappement est enfoncée
Afficher	booléen	faux	Ouvre modal à l'initialisation de la classe

Balisage

Vous pouvez facilement activer les modaux sur votre page sans avoir à écrire une seule ligne de javascript. Donnez simplement à un élément un data-controls-modalattribut qui correspond à un identifiant d'élément modal, et une fois cliqué, il lancera votre modal. Pour ajouter des options modales, incluez-les également en tant qu'attributs de données.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Lancer modal </a>    

Avis Si vous souhaitez que votre modal s'anime à l'intérieur et à l'extérieur, ajoutez simplement une .fadeclasse à votre .modalélément (reportez-vous à la démo pour voir cela en action).

Méthodes

.modal(options)

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

$ ( '#mon-modal' ). modale ({
  clavier : vrai 
})

.modal('basculer')

Bascule manuellement un modal.

$ ( '#mon-modal' ). modal ( 'basculer' )

.modal('montrer')

Ouvre manuellement un modal.

$ ( '#mon-modal' ). modal ( 'montrer' )

.modal('masquer')

Masque manuellement un modal.

$ ( '#mon-modal' ). modal ( 'cacher' )

.modal(vrai)

Renvoie une instance de classe modale d'éléments.

$ ( '#mon-modal' ). modal ( vrai )

Avis Alternativement, cela peut être récupéré avec $().data('modal').

É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).

$ ( '#mon-modal' ). lier ( 'caché' , fonction () {   
  // faire quelque chose ...
})

Démo

Mode de lancement

Ce plugin permet d'ajouter une interaction déroulante à la barre supérieure d'amorçage ou aux navigations par onglets.

Télécharger

Utilisation de bootstrap-dropdown.js

$ ( '#barre supérieure' ). liste déroulante ()

Balisage

Pour ajouter rapidement une fonctionnalité de liste déroulante à n'importe quel élément de navigation, utilisez l' data-dropdownattribut. Toute liste déroulante bootstrap valide sera automatiquement activée.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Accueil </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Liste déroulante </a>  
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Lien secondaire </a></li> 
      <li><a href = "#" > Quelque chose d'autre ici </a></li> 
      <li class = "diviseur" ></li> 
      <li><a href = "#" > Autre lien </a></li> 
    </ul>
  </li>
</ul>

Remarque Si votre interface utilisateur comporte plusieurs listes déroulantes, envisagez d'ajouter l' data-dropdownattribut à un élément conteneur plus important comme .tabsou .topbar.

Méthodes

$().dropdown()

Une API programmatique pour activer les menus pour une barre supérieure ou une navigation par onglets donnée.

Démo

Ce plugin permet d'ajouter l'interaction scrollspy (mise à jour automatique de la navigation) à la barre supérieure d'amorçage.

Télécharger

Utilisation de bootstrap-scrollspy.js

$ ( '#barre supérieure' ). scrollEspion ()

Balisage

Pour ajouter facilement le comportement scrollspy à votre navigation, ajoutez simplement l' data-scrollspyattribut au fichier .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

Méthodes

$().scrollEspion()

Auto active les boutons de navigation en fonction de la position de défilement des utilisateurs.

$ ( 'corps > .topbar' ). scrollEspion ()

Remarque Les balises d'ancrage de la barre supérieure 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>.

.scrollSpy('actualiser')

Le scrollspy met en cache les boutons de navigation et les coordonnées de section pour les performances. Si vous avez besoin de mettre à jour ce cache (probablement si vous avez du contenu dynamique), appelez simplement cette méthode d'actualisation. Si vous avez utilisé l'attribut data pour définir votre scrollspy, appelez simplement refresh sur le corps.

$ ( 'corps' ). scrollSpy ( 'actualiser' )

Démo

Consultez la navigation de la barre supérieure sur cette page.

Ce plugin offre des fonctionnalités supplémentaires pour gérer l'état des boutons.

Télécharger

Utilisation de bootstrap-buttons.js

$ ( '.tabs' ). bouton ()

Méthodes

$().bouton('basculer')

Bascule l'état de poussée. Donne à btn l'impression qu'il a été activé.

Remarque Vous pouvez activer le basculement automatique d'un bouton à l'aide de l' data-toggleattribut.

<bouton class = "btn" data-toggle = "toggle" > ... </button>   

$().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.

<button class = "btn" data-loading-text = "loading stuff..." > ... </button>   

$().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.

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

Démo

Chargement de la démo Basculer la démo

Ce plugin ajoute une fonctionnalité rapide et dynamique d'onglets et de pilules.

Télécharger

Utilisation de bootstrap-tabs.js

$ ( '.tabs' ). onglets ()

Balisage

Vous pouvez activer une navigation par onglets ou pilules sans écrire de javascript en leur donnant simplement un attribut data-tabsou .data-pills

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

Méthodes

$().tabs ou $().pills

Active la fonctionnalité d'onglet et de pilule pour un conteneur donné. Les liens d'onglet doivent faire référence aux identifiants dans le document.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#home" > Accueil </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Messagerie </a></li> 
  <li><a href = "#settings" > Paramètres </a></li> 
</ul>
 
<div class = "pill-content" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "messages" > ... </div> 
  <div id = "paramètres" > ... </div> 
</div>
 
<script>
  $ ( fonction () {  
    $ ( '.tabs' ). onglets ()
  })
</script>

Événements

Événement	La description
monnaie	Cet événement se déclenche lors du changement d'onglet. Utilisez event.targetet event.relatedTargetpour cibler respectivement l'onglet actif et l'onglet actif précédent.

$ ( '#.onglets' ). lier ( 'changer' , fonction ( e ) {   
  e . cible // onglet activé
  e . relatedTarget // onglet précédent
})

Démo

• Maison
• Profil
• messages
• Réglages
• Menu déroulant
  • @gros
  • @mdo

Basé sur l'excellent plugin jQuery.tipsy écrit par Jason Frame ; twipsy est 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 des titres !

Télécharger

Utiliser bootstrap-twipsy.js

$ ( '#exemple' ). twipsy ( options )

Choix

Nom	taper	défaut	la description
animer	booléen	vrai	appliquer une transition de fondu css à l'info-bulle
retarder	Numéro	0	délai avant l'affichage de l'info-bulle (ms)
retardOut	Numéro	0	délai avant de masquer l'info-bulle (ms)
se retirer	chaîne de caractères	''	texte à utiliser lorsqu'aucun titre d'info-bulle n'est présent
placement	chaîne de caractères	'au dessus'	comment positionner l'infobulle - ci-dessus | ci-dessous | gauche | droit
html	booléen	faux	autorise le contenu html dans l'info-bulle
Direct	booléen	faux	utiliser la délégation d'événements au lieu de gestionnaires d'événements individuels
décalage	Numéro	0	décalage en pixels de l'info-bulle par rapport à l'élément cible
Titre	chaîne, fonction	'Titre'	attribut ou méthode pour récupérer le texte du titre
gâchette	chaîne de caractères	'flotter'	comment l'info-bulle est déclenchée - survolez | concentrer | manuel
modèle	chaîne de caractères	[balisage par défaut]	Le modèle html utilisé pour le rendu d'un twipsy.

Remarque Les options d'instance de twipsy individuelles peuvent également être spécifiées via l'utilisation d'attributs de données.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Some title text' > text </a>    

Méthodes

$().twipsy(options)

Attache un gestionnaire twipsy à une collection d'éléments.

.twipsy('montrer')

Révèle un éléments twipsy.

$ ( '#élément' ). twipsy ( 'montrer' )

.twipsy('cacher')

Cache un élément twipsy.

$ ( '#élément' ). twipsy ( 'cacher' )

.twipsy (vrai)

Renvoie une instance de classe twipsy d'éléments.

$ ( '#élément' ). twipsy ( vrai )

Avis Alternativement, cela peut être récupéré avec $().data('twipsy').

Démo

Le plugin popover fournit une interface simple pour ajouter des popovers à votre application. Il étend le plugin bootstrap-twipsy.js , alors assurez-vous de récupérer également ce fichier lorsque vous incluez des popovers dans votre projet !

Avis Vous devez inclure le fichier bootstrap-twipsy.js avant bootstrap-popover.js.

Télécharger

Utiliser bootstrap-popover.js

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

Choix

Nom	taper	défaut	la description
animer	booléen	vrai	appliquer une transition de fondu css à l'info-bulle
retarder	Numéro	0	délai avant l'affichage de l'info-bulle (ms)
retardOut	Numéro	0	délai avant de masquer l'info-bulle (ms)
se retirer	chaîne de caractères	''	texte à utiliser lorsqu'aucun titre d'info-bulle n'est présent
placement	chaîne de caractères	'droit'	comment positionner l'infobulle - ci-dessus | ci-dessous | gauche | droit
html	booléen	faux	autorise le contenu html dans l'info-bulle
Direct	booléen	faux	utiliser la délégation d'événements au lieu de gestionnaires d'événements individuels
décalage	Numéro	0	décalage en pixels de l'info-bulle par rapport à l'élément cible
Titre	chaîne, fonction	'Titre'	attribut ou méthode pour récupérer le texte du titre
contenu	chaîne, fonction	'contenu des données'	une chaîne ou une méthode pour récupérer le texte du contenu. si aucun n'est fourni, le contenu proviendra d'un attribut de contenu de données.
gâchette	chaîne de caractères	'flotter'	comment l'info-bulle est déclenchée - survolez | concentrer | manuel
modèle	chaîne de caractères	[balisage par défaut]	Le modèle html utilisé pour le rendu d'un popover.

Remarque Les options d'instance de popover individuelles peuvent également être spécifiées via l'utilisation d'attributs de données.

<a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > texte </a>    

Méthodes

$().popover(options)

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

.popover('montrer')

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

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

.popover('masquer')

Masque un popover d'éléments.

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

Démo

survoler pour popover

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

Télécharger

Utilisation de bootstrap-alerts.js

$ ( ".alert-message" ). alerte ()

Balisage

Ajoutez simplement un data-alertattribut à vos messages d'alerte pour leur donner automatiquement une fonctionnalité de fermeture.

Choix

Nom	taper	défaut	la description
sélecteur	chaîne de caractères	'.proche'	Quel sélecteur cibler pour clôturer une alerte.

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.

$ ( ".alert-message" ). alerte ( 'fermer' )

Démo