Zurb, der Erfinder von Foundation, hat den Ruf, robuste Tools zu entwickeln, die Webentwickler lieben. Sie erarbeiten effektive Lösungen, weil sie damit beginnen, Probleme zu lösen, auf die sie selbst stoßen.
Jetzt sind sie zurück mit einer brandneuen Open-Source-ES6-JavaScript-@mention-Engine namens Tribute.js. @mention ist eine Benutzeroberflächentechnik zur direkten Ansprache einer Person. Wenn Sie jemanden @erwähnen, wird er in eine Konversation eingebunden. Die @Erwähnung wurde zuerst von Social-Media-Seiten wie Twitter populär gemacht, aber dank der Einführung durch Start-ups wie Slack findet sie auch in allen möglichen Anwendungen Eingang. Bereits 2014 begann Zurb damit, mehrere ihrer Design-Apps auf einer einzigen neuen Plattform namens „ Bemerkenswert. Sie brauchten ein @mention-System, fanden aber keine zuverlässige Option eines Drittanbieters und beschlossen, ihr eigenes System zu entwickeln. Das Ergebnis ist Tribute.js. Tribute.js ist eine native JavaScript-Lösung, was bedeutet, dass es nicht auf Plugins oder Skripte von Drittanbietern angewiesen ist. Durch die Vermeidung von Bibliotheken wie jQuery, Angular usw. verringerte Zurb die Wahrscheinlichkeit von Konflikten zwischen Tribute.js und Skripten, die in Verbindung damit ausgeführt werden. Dies macht Tribute.js zu einem äußerst benutzerfreundlichen Tool, das konsistent in einer Vielzahl verschiedener Anwendungen implementiert werden kann, unabhängig von den anderen Abhängigkeiten, die Sie möglicherweise verwenden möchten.
So funktioniert Tribute.js
Tribute.js ist wirklich einfach zu implementieren. Importieren Sie zunächst das CSS und JS von Tribute.js: Als Nächstes benötigen Sie ein Element in Ihrem Markup, das eine @Erwähnung anzeigt: Initialisieren Sie Tribute abschließend mit einem Array von Objekten, die Ihre Benutzer darstellen, und hängen Sie Tribute dann an das Seitenelement an: Wenn ein Benutzer ein @-Symbol eingibt, wird ihm eine Liste mit Benutzernamen basierend auf dem angezeigt Schlüssel Eigenschaft, wenn sie eine auswählen, die entsprechende Wert Eigenschaft wird eingefügt. Du kannst Tribute herunterladen kostenlos von Github oder installieren Sie es über npm. Eine vollständige Liste der Optionen finden Sie in der Dokumentation.
Ausgewähltes Bild, Gespräche über Steve McClanahan.
