So erstellen Sie ein mittelgroßes, schwebendes Aktionsmenü
Die Popularität von schwebende Aktionsmenüs ist auf dem Vormarsch, vor allem seit Medium.com das Feature in Mode gebracht hat. In Kürze das schwebende Aktionsmenü erscheint wenn du Wählen Sie einen Text aus auf einer Webseite. Das Menü erscheint in der Nähe der Auswahl, verschiedene Aktionen zeigen So können Sie den ausgewählten Text schnell formatieren, hervorheben oder freigeben.
In diesem Tutorial zeige ich Ihnen, wie Sie eine Aktionsmenü für ein ausgewähltes Text-Snippet auf einer Webseite. In unserem Aktionsmenü können Benutzer dies tun den ausgewählten Text twittern an ihre Anhänger.
1. Erstellen Sie den HTML-Code
Das Starter-HTML ist einfach, wir brauchen nur etwas Text Der Benutzer kann auswählen. Für die Demo werde ich verwenden “Der Hirsch und der Jäger” Gute Nacht Geschichte als Beispieltext.
Der Hirsch und der Jäger
Der Hirsch war einmal…
…
2. Erstellen Sie die Aktionsmenüvorlage
Ich bin Hinzufügen des HTML-Codes zum Aktionsmenü gehören in einem Element. Was auch immer im Inneren ist tag es wird nicht gerendert von Browsern, bis es dem Dokument hinzugefügt wird mit JavaScript.
Lassen Sie keinen unnötigen Platz in der tag, da dies das Layout des Aktionsmenüs stören könnte, sobald es in das Dokument eingefügt wird. Falls Sie es wollen, fügen Sie weitere Schaltflächen hinzu Innerhalb #shareBox für mehr Optionen.
3. Erstellen Sie das CSS
Das CSS für die #shareBox Inline-Container geht so:
#shareBox width: 30px; Höhe: 30px; Position: absolut;
Das Position: absolut; Herrschaft wird uns lassen platzieren Sie das Menü wo immer Sie möchten auf der Seite.
Ich habe auch die gestylt Aktionstaste im Inneren #shareBox mit einer Hintergrundfarbe und einem Bild und in seinem ::nach dem Pseudoelement I fügte ein Dreieck für einen Abwärtspfeil hinzu.
#shareBox> button width: 100%; Höhe: 100%; Hintergrundfarbe: # 292A2B; Grenze: keine; Grenzradius: 2px; Umriss: keine; Cursor: Zeiger; Hintergrundbild: URL ('share.png'); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: Mitte; Hintergrundgröße: 70%; #shareBox> button :: after position: absolute; Inhalt: "; Rand oben: 10 Pixel fest # 292A2B; Rand links: 10 Pixel fest transparent; Rand rechts: 10 Pixel fest transparent; links: 5 Pixel; oben: 30 Pixel; 4. Fügen Sie Event-Handler mit JS hinzu
Um zu JavaScript zu gelangen, müssen wir das tun Event-Handler hinzufügen für die Maus nach unten und Mouseup Ereignisse zu fang den Anfang und das Ende ein der Textauswahl.
Sie können auch forschen andere Auswahlveranstaltungen sowie selectstart und benutze sie anstelle von Mausereignissen (was ideal wäre, aber bis jetzt ist ihre Browserunterstützung nicht sehr gut).
Ebenfalls Einen Verweis hinzufügen zum Element mit der querySelector () Methode.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); Funktion onMouseDown () Funktion onMouseUp () 5. Vorherige Auswahl löschen
In dem Maus nach unten Ereignis, wir werden etwas aufräumen, d. h. alle vorherigen Auswahl und das zugehörige Aktionsmenü löschen.
function onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove (); Das getSelection () Methode gibt a zurück Auswahl Objekt Darstellung der Textbereiche derzeit vom Benutzer ausgewählt und die removeAllRange () MethodeEntfernt alle Bereiche aus dem gleichen Auswahl Objekt also Löschen einer vorherigen Auswahl.
6. Zeigen Sie das Aktionsmenü an
Es ist während der Mouseup Ereignis, wann wir werden Bestätigen Sie, ob eine Textauswahl getroffen wurde und weitere Maßnahmen ergreifen.
function onMouseUp () var sel = document.getSelection (), txt = sel.toString (); if (txt! == "") var range = sel.getRangeAt (0); if (range.startContainer.parentElement.parentElement.localName === "article" || range.startContainer.parentElement.localName === "article") // Text im Artikel wurde ausgewählt
Ruft die ausgewählte Textzeichenfolge ab durch den Aufruf der toString () Methode der Auswahl Objekt. Wenn der ausgewählte Text nicht leer ist, fahren Sie mit und fort Holen Sie sich den ersten Bereich von dem Auswahl Objekt.
Angebot ist der ausgewählter Teil des Dokuments. Normalerweise machen Benutzer eine Einzelauswahl Nur, nicht mehrfach (durch Drücken der Strg- / cmd-Taste). Holen Sie also einfach das erste Bereichsobjekt (Index 0) aus der Auswahl mit getRangeAt (0).
Wenn Sie den Bereich kennen, prüfen Sie, ob die Auswahl an einem Ort begann, an dem sie ausgewählt wurde im Artikel. Das startContainer Die Eigenschaft des Bereichs gibt den DOM-Knoten zurück von wo die Auswahl begann.
Manchmal (wenn du innerhalb eines Absatzes auswählen), sein Wert ist nur a Textknoten, In diesem Fall ist es übergeordnetes Element wird sein und der Elternteil der Element wird sein (im Beispielcode in diesem Beitrag).
Andere Zeiten, wenn Sie auswählen über mehrere Absätze hinweg, das startContainer wird sein und sein übergeordneter Knoten wird sein . Daher die zwei Vergleiche in dieser Sekunde ob Bedingung im obigen Code.
Einmal die ob Bedingung vergeht, es ist Zeit zu Holen Sie sich das Aktionsmenü aus der Vorlage und fügen Sie es dem Dokument hinzu. Geben Sie den Code unten ein in der zweiten ob Aussage.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
Das importNode () Methode gibt Knoten aus externen Dokumenten zurück (in unserem Fall Knoten aus ). Wenn es mit dem zweiten Parameter aufgerufen wird (wahr) wird das importierte Element / Knoten kommt mit seinen untergeordneten Elementen.
Sie können einfügen #shareBox irgendwo im Dokumentkörper, Ich habe es vor dem Vorlagenelement hinzugefügt.
7. Platzieren Sie das Aktionsmenü
Wir möchten das Aktionsmenü platzieren direkt darüber & in der Mitte des ausgewählten Bereichs. Zu tun, Holen Sie sich die Rechteckwerte des ausgewählten Bereichs mit der getBoundingClientRect () Methode, die die Größe und Position eines Elements zurückgibt.
Aktualisieren Sie dann die oben und links Werte von #shareBox basierend auf den Rechteckwerten. In den Berechnungen des Neuen oben und links Werte, von denen ich Gebrauch gemacht habe ES6-Vorlagenliterale.
var rect = range.getBoundingClientRect (); var shareBox = document.querySelector ('# shareBox'); shareBox.style.top = 'calc ($ rect.top px - 38px)'; shareBox.style.left = 'calc ($ rect.left px + calc ($ rect.width px / 2) - 30px)'; 8. Funktionalität hinzufügen
Nachdem wir nun das Aktionsmenü in der Nähe des ausgewählten Textes hinzugefügt haben, ist es an der Zeit, den ausgewählten Text zu erstellen für die Menüoptionen verfügbar damit wir etwas tun können.
Weisen Sie den ausgewählten Text einem zu benutzerdefinierte Eigenschaft der Share-Schaltfläche namens 'shareTxt' und fügen Sie ein Maus nach unten Ereignis-Listener für die Schaltfläche.
var shareBtn = shareBox.querySelector ('button'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); Das wahr Parameter von addEventListener () verhindert das Maus nach unten Ereignis vom Sprudeln.
In der onShareClick () Eventhandler, wir fügen Sie den ausgewählten Text in einen Tweet ein durch Zugriff auf die shareTxt Eigenschaft der Schaltfläche.
Funktion onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Einmal die Schaltfläche ist angeklickt, es tut, was es tun soll, und entfernt sich dann von der Seite. Es wird auch Löschen Sie eine Auswahl im Dokument.
Quellcode & Demo
In der Codepen-Demo unten können Sie Prüfung wie das Aktionsmenü funktioniert. Sie können auch das finden vollständiger Quellcode in unserem Github Repo.
