Cet article apprend principalement la zone de plug-in-pop javascript.
Cas
Ajoutez une petite superposition au contenu de la page, tout comme les effets sur l'iPad, en ajoutant des informations supplémentaires aux éléments de la page.
Jetons un coup d'œil à quelques rendus de cas statiques simples
L'effet est relativement simple, principalement la petite forme qui apparaît statiquement, divisée en titre de forme et contenu de forme.
<div> <div> <div> </div> <h3> Popover top </h3> <div> <p> SED POSUERE CONSECTETUR est à Lobortis. Aenean Eu Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venénatis vestibulum. </p> </div> <div> <div> </div> <h3> Popover à droite </h3> <div> <p> Sed Posuère Conseecteur est à Lobortis. Aenean Eu Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venénatis. </p> </div> <div> <div> </div> <h3> Popover à droite </h3> <div> <p> SED POSUERE CONCECTEUR est à Lobortis. Aenean Eu Leo Quam. Pellentesque Ornare Sem Lacinia Quam Vénénatis vestibulum. </p> </div> <div> <div> </div> <h3> Popover Bottom </h3> <div> <p> Sed Posuère Consectetur est à Lobortis. Aenean Eu Leo Quam. Pellentesque Ornare Sem Lacinia Quam Vénénatis vestibulum. </p> </div> <div> <div> </div> <h3> Popover gauche </h3> <div> <p> sed Posuère Consectetur est à Lobortis. Aenean Eu Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venénatis. </p> </div> <div> <div> </div> <h3> Popover Left </H3> <div> <p> Sed Posuère Conseecteur est à Lobortis. Aenean Eu Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venénatis vestibulum. </p> </div> </div> <div> </div>
Mais nous devons encore définir une disposition de base simple pour les éléments
<style type = "text / css">. bs-example-popover .popover {position: relative; Affichage: bloc; flottant: à gauche; Largeur: 240px; marge: 20px;} </ style>Démo dynamique
Jetons un coup d'œil aux rendus d'abord
Un bouton apparaîtra lorsque vous cliquez sur le bouton.
Il est en fait très simple de lire le code.
[Code] <a id = "a2" data-place = "droite" data-content = "c'est-à-dire exprimer un mépris pour divers comportements et idées choquants qui ont des caractéristiques d'attribut telles que la courte, la soie pauvre, pauvre, laide, laide, stupide et masturbation. La soie (ou l'écriture" de la soie ") peut être dite pour avoir évolué des mots" morts "" "". Référer principalement à la plupart d'entre eux de familles pauvres, telles que des ménages petits ou de nombreux ménages de niveau urbain, sans antécédents, de nombreux écoles secondaires, des écoles secondaires, sont allés à la ville pour travailler, ou sont devenus des serveurs de restaurants, ou des administrateurs Internet de la catégorie Internet, et ont obtenu une tasse de soupe amère dans la richesse de la ville; href = "#" Data-Original-Title = "Silk Original Signification"> Veuillez cliquer pour basculer Popover </a> [Code]
C'est juste une étiquette, mais donne la classe de style du bouton, puis donne plusieurs attributs, qui sont principalement utilisés pour afficher la boîte contextuelle:
Le premier: title original de données - titre
Le second: contenu de contenu de données
Troisièmement: position de place-place (en bas, en bas, à gauche, à droite)
Mais maintenant, si vous l'exécutez, le bouton l'a et la zone contextuelle lorsque vous cliquez sur le bouton n'apparaîtra pas. Cela s'est avéré très simple, c'est-à-dire que nous ne l'avons pas encore initialisé, tout comme l'infiltration dans la section précédente.
Ajoutez simplement du code JavaScript simple.
<script type = "text / javascript"> $ ("# a1"). popover (); </cript>Quatre directions
<div style = "margin-left: 200px; margin-top: 100px; margin-boot: 200px;"> <div> <bouton type = "bouton" data-container = "body" data-toggle = "popover" data-placement = "Left" data-content = "vivamus sagittis lace box lacef> bouton laoreet rutum Faucus. Type = "Button" Data-Container = "Body" Data-Toggle = "Popover" Data-Placement = "TOP" Data-Content = "Vivamus Sagittis Lacus Vel Auoreet Laoreet RUTUM FauCIBUS."> La boîte pop-up supérieure </ Button> <Button Type = "Button" Data-Container = "Body" Data-Toggle = "Popover" Data-PLAPPEET = "Data-Content =" VIV-TOGGLE = "Popover" Data-PLAPPEET = " Sagittis lacus vel août laoreet rutrum faucibus. "> La boîte pop-up inférieure </utton> <bouton type =" Button "Data-Container =" Body "Data-Toggle =" Popover "Data-Placement =" Right "Data-Content =" Vivamus Sagittis Lacus Lacus Vel Augue Laoreet Rutrum.
Puis utilisez JavaScript pour activer
<script type = "text / javascript"> $ ("# a1"). popover (); $ ("[data-toggle = popover]"). popover (); </cript>Fonction d'addition sélective
Pour les considérations de performances, l'API d'attribut de données des info-bulleurs et des composants contextuels est éventuellement ajouté, ce qui signifie que vous devez les initialiser vous-même.
Des paramètres supplémentaires sont nécessaires lorsque des boîtes contextuelles sont utilisées dans les groupes de bouton et les groupes de boîtes d'entrée
Lorsque la boîte d'invite est utilisée en conjonction avec le groupe .btn ou le groupe .input, vous devez spécifier l'option Container: «Body» (voir la documentation ci-dessous) pour éviter les effets secondaires indésirables (par exemple, lorsque la boîte pop-up apparaît, les éléments de la page qui coopèrent avec lui peuvent devenir plus larges ou liés).
Lorsque vous utilisez des boîtes contextuelles sur des éléments de page interdits, vous devez ajouter un élément supplémentaire pour l'envelopper
Afin d'ajouter une boîte contextuelle à un élément désactivé ou.
Usage
Activer les boîtes contextuelles via JavaScript:
$ ('# Exemple'). Popover (Options)
Options
Les options peuvent être transmises à travers les propriétés de données ou JavaScript. Pour l'attribut de données, vous devez mettre le nom d'option après les données - par exemple data-animation = "".
méthode
$ (). Popover (Options)
Initialise la boîte contextuelle pour un ensemble d'éléments.
$ ('# élément'). Popover ('show')
Montre la boîte contextuelle.
$ ('# élément'). Popover ('Hide')
Cachez la boîte contextuelle.
$ ('# élément'). Popover ('toggle')
Afficher ou masquer la boîte contextuelle.
$ ('# élément'). Popover ('détruire')
Cachez et détruisez la boîte pop-up.
événement
$ ('[data-toggle = popover]'). sur ('montré.bs.popover', fonction () {alert (1);})Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.