JS Toasts
Toast CSS klasslari
Toast komponenti ogohlantirish oynasiga o‘xshaydi, lekin u biror hodisa yuz berganda (masalan, foydalanuvchi tugmani bosganda, formani yuborganda va h.k.) atigi bir necha soniya ko‘rsatiladi.
Toastlar haqidagi darslik uchun Bootstrap toast darsligimizni o‘qing.
| Klass | Tavsif | Misol |
|---|---|---|
.toast |
Toast yaratadi | Sinab ko‘ring |
.toast-header |
Toast sarlavhasini (header) yaratadi | Sinab ko‘ring |
.toast-body |
Toast tanasini (body) yaratadi | Sinab ko‘ring |
JavaScript orqali faollashtirish
Toastlarni jQuery yordamida ishga tushirish (initsializatsiya qilish) kerak: kerakli elementni tanlang va toast() metodini chaqiring.
Misol
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
O‘zingiz sinab ko‘ring »
Toast parametrlari (options)
Parametrlarni data atributlari yoki JavaScript orqali uzatish mumkin. Data atributlari uchun parametr nomini data- ga qo‘shing, masalan, data-animation="".
| Nomi | Turi | Standart | Tavsif | Sinab ko‘ring |
|---|---|---|---|---|
| animation | boolean | true |
Toastni ko‘rsatish va yashirishda CSS fade (asta-sekin paydo bo‘lish/yo‘qolish) o‘tish effektini qo‘shish kerakligini belgilaydi.
|
Sinab ko‘ring |
| autohide | boolean | true | Toastni standart holatda (avtomatik) yashirish kerakligini belgilaydi | Sinab ko‘ring |
| delay | number | 500 | Toast ko‘rsatilgandan keyin uni yashirish uchun qancha millisekund o‘tishini belgilaydi. | Sinab ko‘ring |
Toast metodlari
Quyidagi jadvalda barcha mavjud toast metodlari keltirilgan.
| Metod | Tavsif | Sinab ko‘ring |
|---|---|---|
| .toast(options) | Toastni parametr bilan faollashtiradi. Yaroqli qiymatlar uchun yuqoridagi parametrlarga qarang | Sinab ko‘ring |
| .toast("show") | Toastni ko‘rsatadi | Sinab ko‘ring |
| .toast("hide") | Toastni yashiradi | Sinab ko‘ring |
| .toast("dispose") | Toastni yashiradi va yo‘q qiladi | Sinab ko‘ring |
Toast hodisalari (events)
Quyidagi jadvalda barcha mavjud toast hodisalari keltirilgan.
| Hodisa | Tavsif | Sinab ko‘ring |
|---|---|---|
| show.bs.toast | Toast ko‘rsatilish arafasida yuz beradi | Sinab ko‘ring |
| shown.bs.toast | Toast to‘liq ko‘rsatilganda yuz beradi (CSS o‘tishlari tugagandan keyin) | Sinab ko‘ring |
| hide.bs.toast | Toast yashirilish arafasida yuz beradi | Sinab ko‘ring |
| hidden.bs.toast | Toast to‘liq yashirilganda yuz beradi (CSS o‘tishlari tugagandan keyin) | Sinab ko‘ring |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!