زورب، سازندگان Foundation، برای ساخت ابزارهای قوی که توسعه دهندگان وب دوست دارند، شهرت دارند. آنها راه حل های موثری می سازند زیرا شروع به حل مشکلاتی می کنند که خودشان با آن مواجه می شوند.

اکنون آنها با یک جاوا اسکریپت کاملا جدید و منبع باز ES6 بازگشته اند @اشاره موتور فراخوانده شده Tribute.js.

@اشاره یک تکنیک رابط کاربری برای خطاب قرار دادن مستقیم به کسی است. وقتی تو @اشاره کسی، آنها در یک مکالمه برچسب زده می شوند. را @اشاره برای اولین بار توسط سایت‌های رسانه‌های اجتماعی مانند توییتر محبوب شد، اما به لطف پذیرش توسط استارت‌آپ‌هایی مانند Slack، راه خود را به همه انواع برنامه‌ها باز می‌کند. در سال 2014، Zurb شروع به ادغام چندین برنامه طراحی خود در یک پلتفرم جدید به نام کرد قابل توجه. آنها به یک نیاز داشتند @اشاره سیستم، اما با ناتوانی در یافتن یک گزینه قابل اعتماد شخص ثالث، آنها تصمیم گرفتند که خود را بسازند. نتیجه Tribute.js است. Tribute.js یک راه حل بومی جاوا اسکریپت است، به این معنی که از اتکا کردن اجتناب می کند روی پلاگین ها یا اسکریپت های شخص ثالث. با اجتناب از کتابخانه‌هایی مانند jQuery، Angular، و غیره، Zurb احتمال تداخل بین Tribute.js و اسکریپت‌هایی را که در ارتباط با آن اجرا می‌شوند کاهش داد. که Tribute.js را به ابزاری بسیار قابل استفاده تبدیل می کند که می تواند به طور مداوم در بسیاری از برنامه های مختلف پیاده سازی شود، صرف نظر از وابستگی های دیگری که ممکن است انتخاب کنید.

روش عملکرد tribute.js

اجرای Tribute.js واقعاً ساده است. اولین، import CSS و JS Tribute.js:

<link rel="stylesheet" href="https://www.webdesignerdepot.com/2016/05/zurb-launches-new-mention-engine-tribute-js/tribute.css" />
<script src="tribute.js"></script>

در مرحله بعد، به یک عنصر در نشانه گذاری خود نیاز دارید که a را نمایش دهد @اشاره:

<input id="commentField" placeholder="Type your comment">

در نهایت، Tribute را با آرایه‌ای از اشیاء که کاربران شما را نشان می‌دهند مقداردهی اولیه کنید و سپس Tribute را به page عنصر:

<script>
var tribute = new Tribute({
 
 values:(
 {key:"John Doe", value="johndoe"},
 {key:"Jane Doe", value="janedoe"}
 )
 
});

tribute.attach(document.getElementById("commentField"));
</script>

هنگامی که کاربر یک علامت @ را تایپ می کند، لیستی از نام های کاربری بر اساس آنها نمایش داده می شود روی را کلید ویژگی، زمانی که آنها یکی را انتخاب می کنند، مربوطه است ارزش ملک درج خواهد شد. تو می توانی دانلود Tribute به صورت رایگان از Github، یا از طریق npm نصب کنید، و لیست کاملی از گزینه ها را در اسناد پیدا خواهید کرد.

تصویر ویژه، مکالمات از طریق استیو مک کلانهان.