Le plug-in pop-up bootstrap fournit une vue étendue. Le plug-in pop-up génère du contenu et des balises en fonction des exigences. Par défaut, les pop-ups sont placés derrière leurs éléments de déclenchement.
Un popover est similaire à une info-bulle, fournissant une vue étendue. Pour activer la boîte contextuelle, l'utilisateur a juste besoin de survoler l'élément. Le contenu de la boîte contextuelle peut être entièrement rempli à l'aide de l'API de données bootstrap (API Bootstrap Data). Cette méthode repose sur les info-bulleurs.
Si vous souhaitez référencer la fonctionnalité du plugin séparément, vous devez référencer Popover.js, qui s'appuie sur le plugin Info-Toolp. Ou, comme mentionné dans le chapitre Bootstrap Plugin Présentation, vous pouvez vous référer à bootstrap.js ou versions compressées de bootstrap.min.js.
1. Utilisation
Le plugin Popover génère du contenu et des balises en fonction des besoins. Par défaut, les popovers sont placées derrière leurs éléments de déclenchement. Vous pouvez ajouter des popovers de deux manières:
Passez la propriété Data: pour ajouter un popover, ajoutez simplement Data-Toggle = "Popover" à une étiquette d'ancrage / bouton. Le titre de l'ancre est le texte du popover. Par défaut, le plugin définit le popover en haut.
<a href = "#" data-toggle = "popover"> Veuillez survoler mon </a>
Via javascript: activer le popover via JavaScript:
$ ('# identifiant'). Popover (Options)
Le plugin Popover n'est pas comme les menus déroulants et les autres plug-ins discutés précédemment, ce n'est pas un plug-in pur CSS. Pour utiliser le plugin, vous devez l'activer à l'aide de jQuery (lire JavaScript). Utilisez le script suivant pour activer toutes les popovers dans la page:
$ (function () {$ ("[data-toggle = 'popover']"). popover ();});
2. Exemples
Une boîte contextuelle consiste à cliquer sur un élément pour faire apparaître un conteneur contenant le titre et le contenu.
// Utilisation de base <Button Type = "Button" Data-Toggle = "Popover" Data-Contocent = "Ceci est un plugin de boîte à fenêtre" Cliquez sur pour faire apparaître / masquer la boîte popup </futton> // javascript initialize $ ('bouton'). Popover ();Le plug-in pop-up propose de nombreuses propriétés pour configurer l'affichage des invites, comme suit:
$ ('Button'). Popover ({Container: 'Body', fenêtre: {Selector: '#View', padding: 10,}});Il existe quatre méthodes à exécuter via JavaScript.
// show $ ('bouton'). Popover ('show'); // masquer $ ('bouton'). Popover ('masquer'); // invertiver et masquer $ ('bouton'). Popover ('toggle'); // masquer et détruire $ ('bouton'). Popover ('détruire');Il existe quatre types d'événements dans le plugin Popover:
// événements, autres similaires à $ ('bouton'). Sur ('show.bs.tab', function () {alert ('gratuit lors de l'appel de la méthode Show!');});Ce qui précède concerne cet article. J'espère qu'il sera utile pour tout le monde d'apprendre le plugin pop-up bootstrap.