Zurb, makers van Foundation, staan bekend om het bouwen van robuuste tools waar webontwikkelaars van houden. Ze maken effectieve oplossingen omdat ze problemen oplossen die ze zelf tegenkomen.
engine called Nu zijn ze terug met een geheel nieuwe, open-source, ES6 JavaScript @mention- engine genaamd Tribute.js .
is a user interface technique for addressing someone directly. @mention is een techniek voor gebruikersinterfaces om iemand rechtstreeks te benaderen. someone, they are tagged into a conversation. Wanneer je iemand @mention , worden ze getagd in een gesprek. 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. De @mention werd voor het eerst gepopulariseerd door sociale mediasites zoals Twitter, maar je zult zien dat deze zich een weg baant naar allerlei soorten applicaties dankzij de adoptie door startups zoals Slack.
In 2014 begon Zurb verschillende van hun ontwerp-apps samen te voegen tot één nieuw platform genaamd opvallend . system, but failing to find a reliable 3rd party option, they decided to build their own. Ze hadden een @mention- systeem nodig, maar slaagden er niet in om een betrouwbare optie van een derde partij te vinden, maar besloten om hun eigen systeem te bouwen. Het resultaat is Tribute.js.
Tribute.js is een native JavaScript-oplossing, wat betekent dat het niet hoeft te vertrouwen op plug-ins of scripts van derden. Door bibliotheken zoals jQuery, Angular, enzovoort te vermijden, verminderde Zurb de kansen op conflicten tussen Tribute.js en scripts die daarmee samenwerden; Dit maakt Tribute.js een zeer bruikbare tool die consistent kan worden geïmplementeerd in een groot aantal verschillende applicaties, ongeacht de afhankelijkheden die u zou kunnen gebruiken.
Tribute.js is heel eenvoudig te implementeren. Importeer eerst de CSS en JS van Tribute.js:
: Vervolgens hebt u een element in uw markup nodig dat een @mention laat zien :
Ten slotte, initialiseer Tribute met een array van objecten die uw gebruikers vertegenwoordigen en bevestig vervolgens Tribute aan het pagina-element:
Wanneer een gebruiker een @ -symbool typt, krijgen deze een lijst met gebruikersnamen te zien op basis van de sleuteleigenschap . Wanneer ze een sleutel selecteren, wordt de bijbehorende waarde- eigenschap ingevoegd.
Jij kan download Tribute gratis via Github of installeer via npm en je vindt een volledige lijst met opties in de documentatie.