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

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



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

SweetAlert : تغییر ظاهر Alert مرورگرها

21 3919 ۱۶ آذر ۹۳

در این مطلب میخوام ابزاری رو بهتون معرفی کنم که با استفاده از اون میتونین ظاهر Alert رو در مرورگرها تغییر بدین. همونطور که میدونین ظاهر Alert در مرورگرهای مختلف با هم فرق میکنه و همچنین یک ظاهر خیلی ساده هست. پس بهتره که با استفاده از آموزشی که امروز براتون توضیح میدم ، ظاهر اونو زیباتر کنید.

تا اونجایی که من امتحان کردم بر روی IE9 به بالا هم بخوبی کار میکنه.

برای شروع باید به سایت SweetAlert مراجعه کنید و فایلهای مربوطه رو دریافت کنید. در این مطلب به فایلهای sweet-alert.css و sweet-alert.min.js نیاز داریم. من این فایلهارو در پایان همین مطلب براتون قرار دادم که میتونین از اونا استفاده کنید.

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

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

تا اینجا فقط کدهای Html رو قرار دادیم و فایلهای مربوطه رو اضافه کردیم و همچنین در آخر یک تگ Script قرار دادیم که کدهای Javascript خودمون رو در اونا بنویسیم. یک دکمه با id = error  هم ساختیم که با کلیک بر روی اون Alert بنمایش در بیاد.

بجای استفاده از دستور alert ما باید از تابع swal یا sweetAlert استفاده کنیم. این دو تابع دقیقا یک کار رو انجام میدن. در ادامه چند مثال از نحوه استفاده این ابزار رو براتون توضیح میدم.

پیام ساده :

با استفاده از روش زیر فقط یک باکس برای کاربر به نمایش در میاد و در اون یک متن ساده نوشته میشه.

کد :

در کد بالا ابتدا مشخص کردیم که زمانی که بر روی المنت error کلیک شد ، تابع swal اجرا بشه.

تصویر خروجی :

alert1

عنوان و متن برای توضیح :

در اینجا علاوه بر title میتونین یک متن هم قرار بدین.

کد :

تصویر خروجی :

alert2

پیام error یا خطا :

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

کد :

تصویر خروجی :

 

alert3

اگه بجای error در کدها success بزارید ، یک چیزی مشابه تصویر زیر رو مشاهده خواهید کرد :

alert4

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

بعنوان یک مثال پیشرفته تر میتونم این کد رو در اختیارتون بزارم :

میبینید که یک شئ ( Object ) به اون پاس دادیم که چند خصوصیت ( Property ) داره. توضیح :

  • title : عنوان پیام
  • text : متن پیام
  • type : نوع پیام که میتونه error یا success یا warning باشه
  • showCancelButton : اگه مقدار این خصوصیت true باشه ، دکمه cancel نمایش داده میشه
  • confirmButtonColor : میتونین رنگ دکمه Confirm رو مشخص کنید
  • confirmButtonTextمتن نوشته شده بر روی دکمه confirm
  • closeOnConfirm : اگر false باشه ، اگر بر روی دکمه Confirm کلیک بشه ، alert بسته نمیشه
  • در قسمت آخر هم یک تابع نوشتیم که زمانی اجرا میشه که بر روی دکمه Confirm کلیک بشه.

خصوصیتهای زیادی دیگه ای هم داره که خودتون میتونین ببینید.

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

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

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

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

  • ‏‏
    Mahmood Dabestani(۲۱ بهمن ۱۳۹۴)

    چرا به کامنت بنده جواب نمیدید؟

  • ‏‏
    Mahmood Dabestani(۲۶ بهمن ۱۳۹۴)

    درود بر شما.
    متاسفانه بنده کد نویسی بلد نیستم.
    تو فایل جاوا اسکریپتش این شرط نوشته شده
    if (params.closeOnConfirm) {
    sweetAlert.close();
    }
    میشه خواهش کنم بفرمایید چه دستوری برای توقف ویدئو باید وارد کنم؟

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram