Dieser Artikel lernt hauptsächlich die JavaScript-Plug-in-in-Up-Box.
Fall
Fügen Sie dem Seiteninhalt ein kleines Overlay hinzu, genau wie die Auswirkungen auf das iPad und fügen Sie Seitenelementen zusätzliche Informationen hinzu.
Werfen wir einen Blick auf einige einfache statische Fallrenderings
Der Effekt ist relativ einfach, hauptsächlich die kleine Form, die statisch auftaucht, in Form von Formtiteln und Formehörden unterteilt.
<div> <div> <div> </div> <h3> Popover Top </h3> <div> <p> sed posuere consectionur est bei lobortis. Aenean EU Leo Quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean EU Leo Quam. Pellentesque ornare sem lacinia quam venenatis. Aenean EU Leo Quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean EU Leo Quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean EU Leo Quam. Pellentesque ornare sem lacinia quam venenatis. Aenean EU Leo Quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </P> </div> </div> <div> </div>
Aber wir müssen noch ein einfaches grundlegendes Layout für die Elemente festlegen
<style type = "text/css">. bs-example-popover .popover {Position: relativ; Anzeige: Block; float: links; Breite: 240px; Rand: 20px;} </style>Dynamische Demo
Schauen wir uns zuerst die Renderings an
Wenn Sie auf die Schaltfläche klicken, wird eine Schaltfläche angezeigt.
Es ist eigentlich sehr einfach, den Code zu lesen.
[Code] <a id = "a2" data-placement = "right" data-content = "dh Verachtung für verschiedene schockierende Verhaltensweisen und Ideen ausdrücken, die Eigenschaften wie kurze, fette, arm, arm, hässliche, hässliche, dumme und masturbationliche Masturbation aufweisen. Die meisten von armen Familien wie ländlichen oder vielen städtischen Bottom-Level-Haushalten, ohne mehr Hintergründe, setzten die Schule in die Stadt, um zu arbeiten, oder wurden in der Stadt, oder im Internet-Café-Internet-Administrator wurden eine Bittersuppe im Reichtum der Stadt, die sich in der Regel von der Stadt befanden, und sie waren sich in der Regel von der Stadt. href = "#" data-original-title = "Silk Original Bedeutung"> Klicken Sie klicken, um Popover </a> [Code] umzuschalten, [Code]
Es ist nur ein Etikett, gibt aber der Stilklasse der Schaltfläche und gibt dann mehrere Attribute an, die hauptsächlich zum Anzeigen des Popup-Feldes verwendet werden:
Der erste: Daten-Original-Titel-Titel
Die zweite: Datenbekämpfung
Drittens: Datenveranstaltungsposition (nach oben, unten, links, rechts)
Wenn Sie es jedoch ausführen, hat es die Schaltfläche und das Popup-Feld, wenn Sie auf die Schaltfläche klicken, wird nicht angezeigt. Es stellte sich heraus, dass es sehr einfach war, das heißt, wir haben es noch nicht initialisiert, genau wie der Tooltip im vorherigen Abschnitt.
Fügen Sie einfach einen einfachen JavaScript -Code hinzu.
<script type = "text/javaScript"> $ ("#a1"). popover (); </script>Vier Richtungen
<div style = "margin-links: 200px; Margin-Top: 100px; Margin-Bottom: 200px;"> <div> <button type type = "button" data-container = "body" data-toggle = "popover" data-placement = "top" data content Sagittis lacus vel augue laoreet rutrum faucibus. "> Das untere Popup-Box </button> <button type =" button "data-container =" body "data-toggle =" popover "data-placement =" rechter "data-content =" vivamus Sagittis lacus vel laoreate Rutrum faucibus faucibus.
Verwenden Sie dann JavaScript, um aktiviert zu werden
<script type = "text/javaScript"> $ ("#a1"). popover (); $ ("[data-toggle = popover]"). popover (); </script>Selektive Additionsfunktion
Bei Leistungsüberlegungen werden die Datenattribut-API von Tooltips und Popup-Komponenten optional hinzugefügt, sodass Sie sie selbst initialisieren müssen.
Zusätzliche Einstellungen sind erforderlich, wenn Popup-Boxen in Schaltflächengruppen und Eingabefeldgruppen verwendet werden
Wenn die Eingabeaufforderung in Verbindung mit .BTN-Gruppen oder .Input-Gruppen verwendet wird, müssen Sie die Option „Körper“ angeben (siehe die Dokumentation unten), um unerwünschte Nebenwirkungen zu vermeiden (zum Beispiel, wenn das Popup-Box angezeigt wird, können die Seitenelemente, die damit kooperieren, weiter oder verurteilt werden).
Wenn Sie Popup-Boxen für verbotene Seitenelemente verwenden, müssen Sie ein zusätzliches Element hinzufügen, um es abzuschließen
Um einem deaktivierten oder abgeschlossenen Element ein Popup -Feld hinzuzufügen, wickeln Sie das Seitenelement ein, das dem Popup -Feld in einem <div> hinzugefügt werden muss, und wenden Sie dann ein Popup -Feld auf dieses <Div> -Element an.
Verwendung
Aktivieren Sie Popup-Boxen über JavaScript:
$ ('#Beispiel'). Popover (Optionen)
Optionen
Optionen können durch Dateneigenschaften oder JavaScript weitergeleitet werden. Für das Datenattribut müssen Sie den Optionsnamen nach Daten einfügen, z. B. Data-Animation = "".
Methode
$ (). Popover (Optionen)
Initialisiert die Popup-Box für eine Reihe von Elementen.
$ ('#element'). popover ('show')
Zeigt die Popup-Box an.
$ ('#Element'). Popover ('Hide')
Verstecken Sie die Popup-Box.
$ ('#Element'). Popover ('Toggle')
Zeigen oder verstecken Sie die Popup-Box.
$ ('#element'). popover ('zerstören')
Pop-up-Box verstecken und zerstören.
Ereignis
$ ('[data-toggle = popover]'). on ('gezeigt.bs.popover', function () {alert (1);})Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.