آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

مرجع کار با JS Toasts در Bootstrap 4

دوره های مرتبط با این مقاله

مرجع کار با JS Toasts در Bootstrap 4:

همانطور که در بخش مربوطه توضیح دادیم، کامپوننت Toast همانند یک کادر هشدار Alert Box است، که در هنگام بروز یک اتفاق (مثل کلیک کاربر بر روی یک دکمه، ارسال فرم و ..)، برای چندین ثانیه نمایش داده می شود و حاوی اطلاعات و پیام است. برای دریافت اطلاعات بیشتر راجع به کامپوننت Toast، به بخش آموزش کار با کادر محاوره ای Toast در بوت استرپ 4، سایت تحلیل داده بروید.

آموزش کلاس های عنصر Toast در Bootstrap 4 :

در جدول زیر، انواع کلاس های کار با کامپوننت Toast در بوت استرپ 4 را به همراه توضیح و کاربرد، معرفی کرده ایم :

کلاس
توضیحات
کلاس toast
یک المنت toast ایجاد می کند.
کلاس toast-header
بخش هدر (سر عنوان) المنت toast را ایجاد می کند.
کلاس toast-body
بدنه (body) اصلی محتویات المنت toast را تعیین می کند.

آموزش فعال سازی المنت Toast با کد جاوا اسکریپت :

برای کارکرد صحیح المنت toast، بایستی آن را از طریق jQuery، فراخوانی و اجرا نمایید. برای این منظور، همانند کد مثال عملی زیر، بایستی المنت مورد نظر را انتخاب کرده و متد toast() را روی آن ایجاد نمایید :

مثال 1

امتحان کنید

آموزش ویژگی ها (options) عنصر toast در Bootstrap 4 :

ویژگی ها (options) را می توانید از طریق خواص data attributes یا کد جاوا اسکریپت به المنت toast، اضافه کنید. برای استفاده از data attributes، بایستی نام ویژگی (option) را به data-*- اضافه کنید، مثل data-delay.

نام
نوع
مقدار پیش فرض
توضیح
animation
boolean
true
تعیین می کند آیا افکت ظاهر/مخفی شدن تدریحی (CSS fade animation) در هنگام باز و بسته شدن المنت toast به آن اضافه شود (true) یا نه (false).
autohide
boolean
true
تعیین می کند آیا المنت toast پس از چند ثانیه نمایش به صورت خودکار بسته شود (true) یا خیر (false).
delay.
عدد number
500
مدت زمان نمایش المنت toast، پس از ظاهر شدن را بر میلی ثانیه تعیین می کند. پس از گذشت این زمان، المنت toast به صورت پیش فرض، مخفی می شود.

آموزش کار با متدها (methods) عنصر toast:

در جدول زیر، به آموزش کار با متدهای عنصر toast در بوت استرپ 4 پرداخته ایم :

متد
توضیح
متد toast(option)
این متد، المنت toast را بر حسب ویژگی یا option دریافتی، فعال می کند. در ادامه به بررسی انواع option قابل استفاده در این متد پرداخته ایم.
متد toast(“show”)
این متد، المنت toast را نمایش می دهد.
متد toast(“hide”)
این متد، المنت toast را مخفی می کند.
متد toast(“dispose”)
این متد، المنت toast را نابود می کند.

آموزش کار با رویدادها (Events) عنصر toast :

در جدول زیر، به آموزش کار با رویدادهای عنصر toast در Bootstrap 4 پرداخته ایم :

رویداد
توضیح
show.bs.toast
زمانی اتفاق می افتد که المنت toast در حال باز شدن و نمایش است.
shown.bs.toast
زمانی اتفاق می افتد که المنت toast کاملا باز شد و نمایش داده شده است (پس از اتمام عملیات CSS Transition یا ظاهر و مخفی شدن تدریجی عنصر).
hide.bs.toast
زمانی اتفاق می افتد که المنت toast در حال بسته شدن و مخفی شدن است.
hidden.bs.toast
زمانی اتفاق می افتد که عنصر toast به طور کامل مخفی و بسته شده است (پس از اتمام عملیات CSS Transition یا ظاهر و مخفی شدن تدریجی عنصر).
  • 40
  •    50
  • تاریخ ارسال :   1398/09/05

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .