Zurb, Foundations Founders, har ett rykte för att bygga robusta verktyg som webbutvecklare älskar. De verkar effektiva lösningar eftersom de börjar lösa problem de stöter på själva.
engine called Nu är de tillbaka med en helt ny, öppen källkod, ES6 JavaScript @mention- motor kallad Tribute.js .
is a user interface technique for addressing someone directly. @mention är en användargränssnittsteknik för att adressera någon direkt. someone, they are tagged into a conversation. När du @mention någon, är de taggade i en konversation. 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. @Mention populärdes först av sociala medier som Twitter, men du hittar det på väg till alla typer av applikationer tack vare adopteringen genom att starta som Slack.
Tillbaka i 2014 började Zurb samla flera av sina designprogram till en enda ny plattform som heter Anmärkningsvärd . system, but failing to find a reliable 3rd party option, they decided to build their own. De behövde ett @mention- system, men lyckades inte hitta ett tillförlitligt tredje part alternativ, de bestämde sig för att bygga sina egna. Resultatet är Tribute.js.
Tribute.js är en inbyggd JavaScript-lösning, vilket innebär att det undviker att förlita sig på plugins eller skript från tredje part. Genom att undvika bibliotek som jQuery, Angular och så vidare minskade Zurb chanserna för konflikter som uppstår mellan Tribute.js och skript som löper i samband med det. vilket gör Tribute.js till ett mycket användbart verktyg som kan implementeras konsekvent över en mängd olika applikationer, oavsett de andra beroenden du kan välja att använda.
Tribute.js är väldigt enkelt att implementera. Först importera Tribute.js 'CSS och JS:
: Därefter behöver du ett element i din markering som visar en @mention :
Slutligen initiera Tribute med en rad objekt som representerar dina användare och sedan bifoga Tribute till sidelementet:
När en användare skriver en @ -ymbol, kommer de att presenteras med en lista med användarnamn baserat på nyckelegenskapen , när de väljer en kommer motsvarande värdeegenskap att införas.
Du kan ladda ner hyllning gratis från Github, eller installera via npm, och du hittar en fullständig lista över alternativ i dokumentationen.