purplecoat : پلاگین jQuery برای ساخت label

- visibility ۴ mode_comment

در این مطلب میخوام یک پلاگین jQuery بنام purplecoat رو خدمت شما معرفی کنم و اونو آموزش بدم.

با استفاده از این پلاگین میتونین به راحتی هر چه تمامتر برای هر المنتی و قسمتی از سایت خودتون یک label قرار بدین ، که میتونه در جهت اهداف خاصی استفاده بشه. مثلا میتونین برای هر قسمت سایت خودتون یک توضیح قرار بدین و ... مانند تصویر زیر :

purplecoat

میبینید که هنگامی که روی دکمه کلیک کنید ، کلیک میکنید ، label مربوط به هر قسمت نمایش داده میشه و با کلیک دوباره ، اون محو میشه.

با استفاده از این کار شما به کاربرتون کمک میکنید که بهتر با سایتتون تعامل داشته باشه و باعث میشه که تجربه کاربری خوبی رو احساس کنه.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jQuery و purplecoat.min.js نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم. تا اینجا تصویری مانند تصویر زیر رو داریم :

purplecoat1

اگر الان روی دکمه مورد نظر کلیک کنید ، هیچ اتفاقی نمیوفته. برای اینکه با کلیک بر روی این دکمه ، لیبل ها نشون داده بشن ، باید برای دکمه مورد نظر خصوصیت زیر رو قرار بدیم :

خصوصیت data-purplecoat-toggle رو برای دکمه مورد نظر قرار بدین. مقداری که برای آن قرار میدهین ، باید دقیقا برابر با مقداری باشه که برای خصوصیات المنتهای دیگر قرار میدهیم.

حالا برای المنتهایی که قصد دارین لیبل قرار بدین ، باید خصوصیتهای data-purplecoat و data-purplecoat-label و data-purplecoat-color رو قرار بدین. توضیح هر کدام :

  • data-purplecoat : مقدار این خاصیت رو باید همون مقداری که برای خاصیت data-purplecoat-toggle قرار دادین ، قرار بدین. در اینجا باید foo بزاریم.
  • data-purplecoat-label : مقدار این خصوصیت همان متنی هست که درون لیبل به کاربر نمایش داده میشود
  • data-purplecoat-color : با استفاده از این خصوصیت هم میتونین رنگ پس زمینه لیبل رو برای هر قسمت جداگونه تعریف کنید.

با توجه به توضیحات بالا ، اگر بخوایم برای اون تصویری که گذاشتیم ، لیبل قرار بدیم ، کدش بصورت زیر هست :

حالا که اینکارو کردیم ، اگر روی دکمه مورد نظر کلیک کنیم ، لیبل نشون داده میشه و اگر دوباره کلیک کنیم ، لیبل مخفی میشه. بهمین راحتی.

برای مطالعه بیشتر میتونین به این لینک و این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

comment دیدگاه کاربران

عالی بود
پلاگین خوبیه

محمد اسفندیاری

موفق باشید

nana

ممنون از آموزش این پلاگین ها

محمد اسفندیاری

خواهش میکنم
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.