Zurb, die Macher der Foundation, haben den Ruf, robuste Tools zu entwickeln, die Webentwickler lieben. Sie stellen effektive Lösungen her, weil sie damit beginnen, Probleme zu lösen, denen sie selbst begegnen.
engine called Jetzt sind sie zurück mit einer brandneuen, Open-Source, ES6 JavaScript @ Mention- Engine namens Tribute.js .
is a user interface technique for addressing someone directly. @mention ist eine Benutzeroberflächen-Technik, um jemanden direkt ansprechen zu können. someone, they are tagged into a conversation. Wenn Sie jemanden angeben , werden sie in eine Konversation getaggt. was first popularized by social media sites like Twitter, but you'll find it making its way into all manner of applications thanks to adoption by startups like Slack. Die @mention wurde zuerst auf Social-Media-Seiten wie Twitter bekannt gemacht, aber dank der Einführung von Startups wie Slack findet sie sich in allen möglichen Anwendungen wieder.
Bereits im Jahr 2014 hat Zurb mehrere ihrer Design-Apps zu einer neuen Plattform zusammengeführt Bemerkenswert . system, but failing to find a reliable 3rd party option, they decided to build their own. Sie brauchten ein @ Mention System, aber da sie keine zuverlässige 3rd Party Option gefunden haben, haben sie beschlossen, eine eigene zu bauen. Das Ergebnis ist Tribute.js.
Tribute.js ist eine native JavaScript-Lösung, was bedeutet, dass es sich nicht auf Plugins oder Skripte von Drittanbietern verlässt. Durch die Vermeidung von Bibliotheken wie jQuery, Angular usw. verringerte Zurb die Wahrscheinlichkeit von Konflikten zwischen Tribute.js und Skripten, die in Verbindung damit laufen. Dies macht Tribute.js zu einem sehr nützlichen Tool, das unabhängig von den anderen Abhängigkeiten, die Sie verwenden möchten, konsistent für eine Vielzahl von Anwendungen implementiert werden kann.
Tribute.js ist wirklich einfach zu implementieren. Importieren Sie zuerst die CSS und JS von Tribute.js:
: Als nächstes benötigen Sie ein Element in Ihrem Markup, das eine @mention anzeigt :
Zuletzt initialisieren Sie Tribute mit einem Array von Objekten, die Ihre Benutzer repräsentieren, und fügen Sie dann dem Seitenelement Tribute hinzu:
Wenn ein Benutzer ein @ -Symbol eingibt, wird auf der Grundlage der Schlüsseleigenschaft eine Liste mit Benutzernamen angezeigt, bei deren Auswahl die entsprechende Werteigenschaft eingefügt wird.
Sie können Download Tribute kostenlos von Github oder über npm installieren, und Sie finden eine vollständige Liste der Optionen in der Dokumentation.