1. Tooltip (Eingabeaufforderung)
Quellcode -Datei:
Tooltip.js
Tooltip.scss
Implementierungsprinzip:
1. Erhalten Sie die Positionierungsinformationen des zu angezeigten Elements (oben, links, unten, rechts, Breite, Höhe usw.)
2. Berechnen Sie die Position des Tooltip, das von oben, links, unten und rechts gehört.
3. Berechnen Sie dann den Koordinatenwert basierend auf dem berechneten Positionswert
4. Anwenden Sie Koordinatenwerte auf Tooltip an
Quellcodeanalyse:
1. Eigentümerdokument: Dokument; Enthält zwei Objekte: <DocType>, documentElement (Stammknoten)
2. $ .contains (DOMA, DOMB): Bestimmen Sie, ob DOMA DOMB -Elemente enthält
3. Die Offset.SetOffset -Methode wird angewendet und der Verwendungsparameter wird übergeben, da es bei der Einstellung des Offs nicht abgerundet werden kann.
4..
5. GetPosition: Diese Funktion erhält Informationen zu Elementpositionierungskoordinaten, wie z. B. oben, links, unten, rechts, Breite, Höhe, Scrollen usw.
5.1. Die GetBoundingClientRect -Methode wird verwendet, diese Methode kann jedoch die Breite und Höhe in IE8 anschließen.
5.2. Wenn es sich um einen Körper handelt, werden Breite und Höhe auf Fenster zurückgesetzt
5.3. Der Quellcode lautet wie folgt:
$ element = $ element || Dies. Siehe https://github.com/twbs/bootstrap/issues/14093 elrect = $ .extend ({}, elrect, {width: elrect.right - elrect.left, Höhe: elrect.bottom - Elrect.top})} var eloffset = is body body? {Top: 0, links: 0}: $ element.offset () var scroll = {scroll: isBody? document.documentElement.scrolltop || document.body.scrolltop: $ element.scrolltop ()} var outterdims = isBody? {Breite: $ (Fenster) .Width (), Höhe: $ (Fenster) .Height ()}: nullReturn $ .extend ({}, elektriert, scroll, oterdims, eloffset)6. GetCalculedOffset: Berechnet den Koordinatenwert von Tooltip mit dem Prinzip der Breite und des Höhenfalts, um ihn zu implementieren
6.1. Untere Zeit
6.1.1. Oben ist die obere + Höhe des Positionierungselements (POS)
6.1.2. Links ist die Breite des Positionierungselements (POS) /2 Tooltip -Elementbreite /2
6.2. Wenn oben
6.2.1. Oben ist die Höhe des oberen Tooltip-Elements, das das Element (POS) lokalisiert.
6.2.2. Links ist die Breite des Positionierungselements (POS) /2 Tooltip -Elementbreite /2
6.3. Nach links
6.3.1. Oben ist das obere Positionierungselement (POS) Höhe/2 Tooltip -Elementhöhe/2
6.3.2. Links ist die Breite des linken Tooltip -Elements, das das Element (POS) lokalisiert.
6.4. Rechts
6.4.1. Oben ist das obere Positionierungselement (POS) Höhe/2 Tooltip -Elementhöhe/2
6.4.2. Links ist die Breite des Positionierungselements (POS)
6.5. Die Position des kleinen Dreiecks beträgt im Allgemeinen 50% des Elements. Wenn der Tooltip jedoch nach links, oben, rechts und unten verborgen ist, muss er neu berechnet und angepasst werden. Der Methodenname lautet: GetViewPortAdjustdDelta
6.5.1. Berechnen Sie zuerst die Breite oder Höhe des Überlaufs
6.5.2. Berechnen Sie dann den Wert von Arrowdelta und verstecken Sie den Wert * 2 Tooltip -Breite + Tooltip -Breite
6.5.3. Stellen Sie den Wert des oberen oder linken Prozentsatzes des Dreiecks ein
2. Popover (Popup -Box)
Quellcode -Datei:
Popover.js
Popover.scss
Implementierungsprinzip:
1. Erben Sie die Tooltip -Implementierung
2. Mit einem zusätzlichen Titel können Sie auch den Inhalt anpassen (interaktive Steuerelemente wie Eingabe und Taste können in ihn eingefügt werden).
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.