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

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



  آیا می دانید تا کنون 6251 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

Snarl : ابزاری برای ساخت پیامهای هشدار زیبا

12 1437 ۲۲ فروردین ۹۴

در این مطلب میخوام یک ابزار زیبا بنام Snarl رو خدمت شما معرفی کنم و اونو آموزش بدم.

snarl

 

با استفاده از این ابزار میتونین براحتی هر چه تمامتر برای سایت خودتون پیامهای زیبایی قرار بدین. این پیامها استایل و افکت زیبایی داره و میتونین برای ارتقاء رابط کاربری سایتتون از اونا استفاده کنید. درون این ابزار هر پیامی رو میتونین به کاربران سایتتون بدین.

این ابزار مستقل هست و به هیچ کتابخانه ای نیاز نداره. همچنین با موبایل و تبلت هم سازگاری داره.

میبینید که یک دکمه قرار داده شده و هر بار که روی اون کلیک میکنید ، از سمت راست و بالا یک پیام با افکت زیبا ظاهر میشه و بعد از چند ثانیه مخفی میشه. هر وقت که روی پیام هاور کنید ، در سمت راستش یک ضربدر ظاهر میشه که با کلیک بر روی اون پیام بسته میشه. همچنین با کلیک بر روی خود پیام ، یک alert داده میشه و id آن پیام در اختیارتون قرار میگیره.

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

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

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

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

میبینید که در بالا یک دکمه با id = sample قرار دادم. برای اینکه در Javascript بهش دسترسی داشته باشم ، باید کد زیر رو بنویسم :

حالا دیگه دست شماست که میخواید طی چه رویدادی این پیامها نمایش داده بشه. من میخوام هر زمان که کاربر روی دکمه مورد نظر کلیک کرد ، پیام نمایش داده بشه. در ابتدا باید یک رویداد کلیک برای sample تعریف کنیم :

حالا باید کدهای مورد نظر رو درون این تابع قرار بدین. اولین کاری که میکنید اینه که متد addNotification رو برای شئ Snarl فراخوانی کنید :

حالا باید ویژگی های مورد نظرتون رو قرار بدین و مقادیر هر کدام رو نیز وارد کنید :

توضیح ویژگی ها :

  • title : در اینجا عنوان پیغام رو قرار میدین
  • text : در اینجا متن پیام رو قرار میدین
  • timeout : با استفاده از این ویژگی میتونین مدت زمانی که پیام به کاربر نشون داده بشه رو مشخص کنید. بر حسب میلی ثانیه هست. در بالا ما 4 ثانیه رو قرار دادیم.
  • action : در اینجا باید اقدامی رو که با کلیک کردن بر روی پیام انجام میشه رو مشخص کنید. اگر یک url بصورت زیر قرار بدین :

    با اینکار اگر کاربر بر روی پیام کلیک کنه ، به این آدرس منتقل میشه. همچنین میتونین در مقابل این action یک تابع با مجموعه ای از کدهای بزارین که وقتی روی پیام مورد نظر کلیک شد ، اجرا بشن :

    با اینکار اگر کاربر روی یک alert داده میشه و id اون پیام رو بهش اعلام میکنه. این ابزار برای هر پیام یک id مشخص میکنه که میتونین با استفاده از متغیر id به اون دسترسی داشته باشین.

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

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

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

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

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

  • ‏‏
    بردیا راستین(۲۳ فروردین ۱۳۹۴)

    خیلی جالب و شیک بود استفاده کردیم.

  • ‏‏
    محسن(۵ تیر ۱۳۹۴)

    سلام
    سپاس از کارای خوبتون
    اگه بخوام وقتی صفحه لود شد اون پیغام نمایش داده بشه چه تغییراتی باید اعمال کنم؟

    • ‏‏
      محمد اسفندیاری(۵ تیر ۱۳۹۴)

      سلام خواهش میکنم
      ببینید در این مطلب کاری کردیم که زمانی که کاربر کلیک کرد ، اون پیغام نمایش داده بشه
      حالا شما میتونین کاری کنید که زمانی که صفحه لود شد این پیغام نمایش داده بشه ، به همین راحتی
      موفق باشید

      • ‏‏
        محسن(۵ تیر ۱۳۹۴)

        این که خود سوال من شد!
        نتونستم این تغییرات رو خودم اعمال کنم، ممنون میشم شما بگید به چه شکل(کد)
        سپاس

      • ‏‏
        محسن(۵ تیر ۱۳۹۴)

        به طور مثال وقتی به جای click از doubleclick یا mouseover استفاده می کنم؛ کار می کنه ولی وقتی از load استفاده می کنم کار نمی کنه
        اشکال کار رو و کد مورد نظر رو اگر اعلام کنید سپاسگزار خواهم بود

        • ‏‏
          محمد اسفندیاری(۵ تیر ۱۳۹۴)

          کدهای جاوااسکریپت و فایل های JS رو بزارین خط آخر و قبل از
          شاید جواب داد

  • ‏‏
    محسن(۵ تیر ۱۳۹۴)

    روی همین کدی که شما گذاشتید کار نمیکنه!!
    به جای click از load استفاده می کنم ولی درست نمیشه
    اگه ممکنه خودتون آزمایش کنید ببینید مشکل از چیه

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram