Zurb, grunnleggere av Foundation, har et rykte for å bygge robuste verktøy som webutviklere elsker. De håndterer effektive løsninger fordi de begynner å løse problemer de møter selv.
engine called Nå er de tilbake med en helt ny, åpen kildekode, ES6 JavaScript @mention- motor kalt Tribute.js .
is a user interface technique for addressing someone directly. @mention er et brukergrensesnitt for å adressere noen direkte. someone, they are tagged into a conversation. Når du @mention noen, er de merket inn i en samtale. 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 ble først populært av sosiale medier, som Twitter, men du finner det på vei til alle typer applikasjoner takket være adopsjon ved oppstart som Slack.
Tilbake i 2014 begynte Zurb å kombinere flere av designappene til en enkelt ny plattform som heter Bemerkelsesverdig . system, but failing to find a reliable 3rd party option, they decided to build their own. De trengte et @mention- system, men klarte ikke å finne et pålitelig tredjeparts alternativ, de bestemte seg for å bygge sine egne. Resultatet er Tribute.js.
Tribute.js er en innfødt JavaScript-løsning, noe som betyr at det unngår å stole på tredjeparts plugins eller skript. Ved å unngå biblioteker som jQuery, Angular og så videre, reduserte Zurb sjansene for konflikter som oppstår mellom Tribute.js og skript som kjører i forbindelse med det; som gjør Tribute.js til et svært brukbart verktøy som kan implementeres konsekvent gjennom en rekke forskjellige applikasjoner, uavhengig av de andre avhengighetene du kan velge å bruke.
Tribute.js er veldig enkelt å implementere. Først importerer du Tribute.js 'CSS og JS:
: Deretter trenger du et element i merket ditt som vil vise en @mention :
Til slutt, initialiser Tribute med en rekke objekter som representerer brukerne dine, og legg deretter til hyllest til sideelementet:
Når en bruker skriver et @ -symbol, vil de bli presentert med en liste over brukernavn basert på nøkkelegenskapen , når de velger en, vil tilsvarende verdiegenskap bli satt inn.
Du kan laste ned hyllest gratis fra Github, eller installer via npm, og du finner en full liste over alternativer i dokumentasjonen.