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	faux	Inclut un élément modal-backdrop
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 = "true" > 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 ({
  closeOnEscape : 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

Utiliser boostrap-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 boostrap-scrollspy.js

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

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

$().scrollspy()

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 ajoute une fonctionnalité rapide et dynamique d'onglets et de pilules.

Télécharger

Utilisation de boostrap-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> 
</ul>
 
<script>
  $ ( fonction () {  
    $ ( '.tabs' ). onglets ()
  })
</script>

Démo

• Maison
• Profil
• messages
• Réglages

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

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 boostrap-twipsy.js , alors assurez-vous de récupérer également ce fichier lorsque vous incluez des popovers dans votre projet !

Télécharger

Utiliser boostrap-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'	attribut ou méthode pour récupérer le texte du contenu
gâchette	chaîne de caractères	'flotter'	comment l'info-bulle est déclenchée - survolez | concentrer | manuel

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.

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