Klicken Sie auf, ziehen Sie, ver?ffentlichen Sie: Sie haben gerade einen Text auf einer Webseite ausgew?hlt - wahrscheinlich, um ihn irgendwo zu kopieren und einfügen oder zu teilen. W?re es nicht cool, wenn die Auswahl dieses Textes einige Optionen enthüllt würde, die diese Aufgaben erleichtern? Das ist ein Auswahlmenü.

M?glicherweise sind Sie bereits mit Auswahlmenüs vertraut, wenn Sie jemals einen Online -Editor verwendet haben. Wenn Sie Text ausw?hlen, kann die Auswahl über ihr geformt werden. Tats?chlich schreibe ich diesen Entwurf in einem Herausgeber, der genau das tut.

Lassen Sie uns sehen, wie wir mithilfe der Auswahl -API von JavaScript ein Auswahlmenü erstellen k?nnen. Die API bietet uns Zugriff auf den Raum und den Inhalt des ausgew?hlten Bereichs auf einer Webseite. Auf diese Weise k?nnen wir das Auswahlmenü genau über dem ausgew?hlten Text platzieren und auf den ausgew?hlten Text selbst zugreifen.

Hier ist ein HTML -Snippet mit einem Beispieltext:

 <artikels>
  <h1> W?hlen Sie den folgenden Text über </h1> aus 
  <p> Cascading Style Sheets (CSS) ist eine Stylesheck -Sprache, die zur Beschreibung der Pr?sentation eines Dokuments, das in einer Markup -Sprache wie HTML geschrieben wurde, verwendet wird. CSS ist neben HTML und JavaScript eine Eckpfeiler -Technologie des World Wide Web. CSS wurde entwickelt, um die Trennung von Pr?sentation und Inhalten einschlie?lich Layout, Farben und Schriftarten zu erm?glichen. Diese Trennung kann die Zug?nglichkeit in den Inhalten verbessern und mehr Flexibilit?t und Kontrolle in der Spezifikation der Pr?sentationsmerkmale bieten. </p>

<semplate> <span> </span> </semplate></artikels>

Am Ende gibt es dort ein Tag. Die im Inneren ist unser Auswahlmenü. Alles in einem -Tag wird auf der Seite erst dann gerendert , wenn es sp?ter mit JavaScript zur Seite hinzugefügt wird. Wir werden der Seite das Auswahlmenü hinzufügen, wenn der Benutzer Text ausw?hlt. Und wenn der Benutzer diesen Text ausw?hlt, fordert unser Auswahlmenü den Benutzer auf, ihn zu twittern.

Hier ist das CSS, um es zu stylen:

 #Kontrolle {
    Hintergrund-Image: URL ("Daten: Bild/SVG XML, <svg xmlns=" ??http://www.w3.org/2000/svg " width="'40px'" height="'40px'"> <fremdobject width="'40px'" height="'40px'"> <divject xmlns="'http://www.w3.org/1999/xhtml'" style="'width:40px;height:40px;line-height:40px;text-align:center;color:transparent;text-shadow:" yellow black schwarz schriftgr>?  </divject></fremdobject> </svg> ");
  Cursor: Zeiger;
  Position: absolut;
  Breite: 40px;
  H?he: 40px;
}
#Control :: vor {
  Hintergrundfarbe: Schwarz;
  Farbe: wei?;
  Inhalt: "Tweet das!";
  Anzeige: Block;
  Schriftgewicht: fett;
  Rand-Links: 37px;
  Rand: 6px;
  Polsterung: 2px;
  Breite: Max-Inhalt;
  H?he: 20px;
}

Schauen Sie sich diesen Artikel an, um zu erfahren, wie ich ein Emoji (?) Für das Hintergrundbild verwendet habe.

Bisher ist der Beispieltext fertig und die Auswahlmenüsteuerung wurde gestylt. Gehen wir mit dem JavaScript weiter. Wenn eine Auswahl getroffen wird, erhalten wir die Gr??e und Position des ausgew?hlten Bereichs auf der Seite. Anschlie?end verwenden wir diese Messungen, um die Position des Auswahlmenüsteuerers an der oberen Mitte des ausgew?hlten Bereichs zuzuweisen.

 var Control = document.importnode (document.querySelector ('Vorlage'). Inhalt, true) .Childnodes [0];
document.querySelector ('p'). onPoInterup = () => {
  let Selection = document.getSelection (), text = selection.toString ();
  if (text! == "") {
    SET rect = selection.getRangeat (0) .GetBoundingClientRect ();
    control.style.top = `calc ($ {rect.top} px - 48px)`;
    control.style.left = `calc ($ {rect.left} px calc ($ {rect.width} px / 2) - 40px)`;
    steuern ['text'] = text; 
    document.body.Appendchild (Kontrolle);
  }
}

In diesem Code erhalten wir zun?chst eine Kopie des Auswahlmenüsteuerers in und zuordnen sie dann der Steuervariablen zu.

Als n?chstes schreiben wir die Handler -Funktion für das OnPoInterup -Ereignis des Elements, das den Beispieltext tr?gt. In der Funktion erhalten wir die Auswahl und die ausgew?hlte Zeichenfolge über document.getSelection (). Wenn die ausgew?hlte Zeichenfolge nicht leer ist, erhalten wir die Gr??e und Position des ausgew?hlten Bereichs über GetBoundingClientRect () und platzieren sie in die Richtvariable.

Mit Rect berechnen und zuweisen wir die oberen und linken Positionen der Steuerung. Auf diese Weise befindet sich die Auswahlmenüsteuerung etwas über dem ausgew?hlten Bereich und horizontal zentriert. Wir weisen die ausgew?hlte Zeichenfolge auch einer benutzerdefinierten Steuerungseigenschaft zu. Dies wird sp?ter verwendet, um den Text zu teilen.

Und schlie?lich fügen wir der Webseite mit appendChild () die Kontrolle über die Webseite hinzu. Wenn wir zu diesem Zeitpunkt einige der Beispieltext auf der Seite ausw?hlen, wird das Auswahlmenü Steuerung auf dem Bildschirm angezeigt.

Jetzt k?nnen wir den Code machen, was passiert, wenn das Auswahlmenü -Steuerung klickt. Mit anderen Worten, wir machen es so, dass der Text getwittert wird, wenn die Eingabeaufforderung angeklickt wird.

 control.addeventListener ('pointerdown', onControldown, true);

Funktion OnControldown (Ereignis) {
  window.open (`https://twitter.com/intent/tweet?text=$ {this.text}`)
  this.remove ();
  document.getSelection (). removeallranges ();
  Event.StopPropagation ();
}

Wenn auf das Steuerelement geklickt wird, wird eine Registerkarte mit der Seite "New Tweet" von Twitter ge?ffnet, komplett mit dem ausgew?hlten Text.

Nach der Tweet -Eingabeaufforderung wird die Auswahlmenüsteuerung nicht mehr ben?tigt und entfernt, zusammen mit jeder auf der Seite getroffenen Auswahl. Die Art und Weise, wie das Zeigerereignis weiter unten im Dom -Baum kaskadiert, wird an diesem Punkt ebenfalls gestoppt.

Wir brauchen auch einen Event -Handler für das OnPointerdown -Ereignis der Seite:

 document.onpointerdown = () => {    
  let Control = document.querySelector ('#control');
  if (control! == null) {control.remove (); document.getSelection (). removeallranges ();}
}

Jetzt werden die Steuerung und jede Auswahl auf der Seite entfernt, wenn Sie auf der Seite überall auf der Seite klicken, aber das Auswahlmenü steuern.

Demo

Hier ist eine sch?nere Version, die Chris zusammengestellt hat:

Und hier ist ein Beispiel, das im Auswahlmenü mehr als eine Steuerung zeigt:

über diese

Es ist nicht unbedingt notwendig, dass wir es benutzen. Stattdessen k?nnen Sie auch versuchen, einfach zu verstecken und die Steuerung auf andere Weise anzeigen, wie das versteckte HTML -Attribut oder die CSS -Anzeige. Sie k?nnen auch eine Auswahlmenüsteuerung im JavaScript selbst erstellen. Die Codierungsentscheidungen h?ngen davon ab, wie effizient Sie sie ausführen, und ihre Fallbacks, falls erforderlich, sowie wie sie zu Ihrer Anwendung passen.

Einige UI/UX -Ratschl?ge

Dies ist zwar ein guter Effekt, aber es gibt einige Dinge zu berücksichtigen, um eine gute Benutzererfahrung zu gew?hrleisten. Vermeiden Sie es beispielsweise nicht, Ihren eigenen Text in die Textauswahl zu injizieren. Es ist aufdringlich und nervig. Wenn es einen Grund gibt, dies zu tun, wie das Hinzufügen des Quellzitats, lassen Sie den Benutzer eine Vorschau des endgültigen Textes anzeigen, bevor Sie ihn ver?ffentlichen. Andernfalls kann der Benutzer von der Addition verwirrt oder überrascht sein.

Noch eine Sache: Es ist am besten, wenn die Menüsteuerung aus dem Weg ist. Wir wollen nicht, dass es zu viel von dem umgebenden Inhalt vertuscht. So etwas summiert sich zu CSS ?Datenverlust“ und wir m?chten das vermeiden.

Fazit: Verstehen Sie, warum Ihre Benutzer Text auf Ihrer Website ausw?hlen und die Steuerelemente auf eine Weise hinzufügen müssen, die aus dem Weg r?umen, was sie versuchen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Aktionen für ausgew?hlten Text mit der Auswahl -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!