Zurb, skabere af Foundation, har et ry for at bygge robuste værktøjer, som webudviklere elsker. De laver effektive løsninger, fordi de begynder at løse de problemer, de støder på.
engine called Nu er de tilbage med en helt ny, åben kilde, ES6 JavaScript @mention motor kaldet Tribute.js .
is a user interface technique for addressing someone directly. @mention er en brugergrænseflade teknik til at adressere nogen direkte. someone, they are tagged into a conversation. Når du @mention nogen, er de tagget ind 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 blev først populæriseret af sociale medier som Twitter, men du finder det på vej til alle mulige applikationer takket være vedtagelse ved opstart som Slack.
Tilbage i 2014 begyndte Zurb at kombinere flere af deres design apps til en enkelt ny platform kaldet Bemærkelsesværdig . system, but failing to find a reliable 3rd party option, they decided to build their own. De havde brug for et @mention- system, men undlod at finde en pålidelig 3. parts mulighed, de besluttede at bygge deres egne. Resultatet er Tribute.js.
Tribute.js er en indfødt JavaScript-løsning, hvilket betyder, at det undgår at stole på tredjeparts plugins eller scripts. Ved at undgå biblioteker som jQuery, Angular og så videre, reducerede Zurb chancerne for konflikter, der opstår mellem Tribute.js og scripts, der løber i forbindelse med det; hvilket gør Tribute.js til et meget brugbart værktøj, som kan implementeres konsekvent på tværs af en lang række forskellige applikationer, uanset de andre afhængigheder, du måske vælger at bruge.
Tribute.js er virkelig nemt at implementere. Først importerer Tribute.js 'CSS og JS:
: Dernæst skal du have et element i din markering, der viser en @mention :
Endelig skal du initialisere Tribute med en række objekter, der repræsenterer dine brugere, og derefter vedhæfte Tribute til sideelementet:
Når en bruger skriver et @ -symbol, vil de blive præsenteret med en liste over brugernavne baseret på nøgleegenskaben , når de vælger en, vil den tilsvarende værdiegenskab indsættes.
Du kan download hyldest gratis fra Github, eller installer via npm, og du finder en komplet liste over muligheder i dokumentationen.