عضویت در سایت

ورود

فراموشی رمز عبور

رمز عبور خود را فراموش کرده اید؟ ایمیل خود را وارد کنید

ورود

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

در بین 1170 آموزش و 2024 پرسش به دنبال چه هستید؟

ویندوز
نصب آنلاین ویندوز

ویندوز 7,8,10,11
مشاوره
مشاوره خرید لپ تاپ و کامپیوتر

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

1k+
پشتیبانی آنلاین

سخت افزار/نرم افزار

آموزش ساخت Snackbar یا Toast Message با جاوا اسکریپت

سلام،

گاهی اوقات لازم است اطلاعاتی را به صورت پاپ آپ به کاربر نشان دهیم، اما نمیتوانیم از مودال Bootstrap استفاده کنیم. بنابراین باید یک Snackbar بوت استرپ بسازیم یا می توانیم بگوییم که یک Tosat Message. اسنکبار اغلب به عنوان راهنمای ابزار/پاپ آپ برای نشان دادن یک پیام در پایین صفحه استفاده می شود که بعد از چند ثانیه به صورت خودکار حذف میشود و جایگزین بسیار خوبی برای مودال می باشد، در ادامه همراه بپرسم باشید تا با کمک بوت استرپ یک snackbar جذاب بسازیم.

ساخت snackbar جاوا اسکریپت

ساخت snackbar جاوا اسکریپت

در اصل Tost Message در اندروید به کار میبرد و وقتی یک پیا کوتاه را بخواهیم در برنامه ی اندرویدی به کاربر نشان دهیم از این روش استفاده میکنیم، حالا ما میتوانیم این Tosat Message را سفارشی سازی کنیم و طوری تنظیم کنیم که برای چند ثانیه نمایش داده شود و بعد مخفی شود.

اکنون، می‌خواهیم یک نمونه Snakbar,Tosat Message جالب برای نشان دادن دکمه‌های فروشگاه Google Play و Aparat در سمت پایین صفحه به‌عنوان یک پنجره بازشو با دکمه بستن نشان دهیم.

  • کد HTML خود را برای Snackbar با آیدی snakbar# ایجاد کنید، می‌توانید از کلاس‌های Bootstrap برای طراحی واکنش‌گرا درست مانند آن استفاده کنید.

  • اکنون، یک استایل برای snackbar# با کلاس show و hide ایجاد می کنیم، از متد @WebKit-keyframes برای fade-in و fade-out استفاده می کنیم.

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

  • در انتها، کد جاوا اسکریپت خود را برای snackbar# ایجاد کنید تا جلوه ها نشان داده و پنهان شود.

این کد جاوا اسکریپت Snakbar را پس از ۳ ثانیه بارگیری صفحه به طور خودکار نشان می دهد. و بعد از ۱۵ ثانیه به طور خودکار ناپدید می شود.

کد کامل:

مطلب پیشنهادی:  قالب نمونه کار Marvel

نمونه کد دوم:

میتوانید با کمک css به سفارشی سازی ظاهر SnackBar بپردازید.

مقاله به پایان رسید؛ همراه ما باشید با دیگر آموزش ها …

موفق باشید.

درباره احمد آخوندیمدیر سایت

همیشه در تلاش برای یادگیری :) ارتباط با من: 09159352892

دنبال کردن

ارسال نظر

رفتن به بالا

سامانه آموزشی و خدماتی بپرسم

اولین وب سایت آموزشی و پرسش و پاسخ در ایران

بپرسم را میتوان به عنوان مرجعی برای آموزش و حل مشکلات دانست، در بپرسم سعی کرده ایم آموزش های برنامه نویسی، طراحی سایت، کار با نرم افزارها ها و… را آموزش دهیم. همچنین محیطی فراهم کرده ایم تا کاربران بتوانند در این محیط سوالات خود را بپرسند و مشکل خود را حل کنند.