illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

4 2849 ۲۹ آذر ۹۳

در این مطلب میخوام یک پلاگین 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 : با استفاده از این خصوصیت هم میتونین رنگ پس زمینه لیبل رو برای هر قسمت جداگونه تعریف کنید.

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

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

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    سوران(۲۹ آذر ۱۳۹۳)

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

  • ‏‏

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram