آموزش ساخت Snackbar یا Toast Message با جاوا اسکریپت
سلام،
گاهی اوقات لازم است اطلاعاتی را به صورت پاپ آپ به کاربر نشان دهیم، اما نمیتوانیم از مودال Bootstrap استفاده کنیم. بنابراین باید یک Snackbar بوت استرپ بسازیم یا می توانیم بگوییم که یک Tosat Message. اسنکبار اغلب به عنوان راهنمای ابزار/پاپ آپ برای نشان دادن یک پیام در پایین صفحه استفاده می شود که بعد از چند ثانیه به صورت خودکار حذف میشود و جایگزین بسیار خوبی برای مودال می باشد، در ادامه همراه بپرسم باشید تا با کمک بوت استرپ یک snackbar جذاب بسازیم.
ساخت snackbar جاوا اسکریپت
در اصل Tost Message در اندروید به کار میبرد و وقتی یک پیا کوتاه را بخواهیم در برنامه ی اندرویدی به کاربر نشان دهیم از این روش استفاده میکنیم، حالا ما میتوانیم این Tosat Message را سفارشی سازی کنیم و طوری تنظیم کنیم که برای چند ثانیه نمایش داده شود و بعد مخفی شود.
اکنون، می‌خواهیم یک نمونه Snakbar,Tosat Message جالب برای نشان دادن دکمه‌های فروشگاه Google Play و Aparat در سمت پایین صفحه به‌عنوان یک پنجره بازشو با دکمه بستن نشان دهیم.
- کد HTML خود را برای Snackbar با آیدی snakbar# ایجاد کنید، میتوانید از کلاس‌های Bootstrap برای طراحی واکنش‌گرا درست مانند آن استفاده کنید.
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ |
<div class="container"> <h2 class="text-danger">Cool Snackbar/Toast demo</h2> <div id="snackbar"> <div class="close"><i class="fas fa-times-circle"></i></div> <div class="col-sm-6 col-xs-6 col-md-6"> <a hreflang="en-in" href="https://play.google.com/" target="_blank" > <img src="google-play-store.png" alt="Google Play Store"> </a> </div> <div class="col-sm-6 col-xs-6 col-md-6 second"> <a hreflang="en-in" href="http://aparat.com" target="_blank" > <img src="aparat.png" alt="YouTube Link" > </a> </div> <div class="clearfix"></div> </div> </div> |
- اکنون، یک استایل برای snackbar# با کلاس show و hide ایجاد می کنیم، از متد @WebKit-keyframes برای fade-in و fade-out استفاده می کنیم.
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ |
#snackbar { visibility: hidden; background-color: #FFFFFF; text-align: center; border-radius: ۵px; padding: ۱۶px; position: fixed; z-index: ۱; bottom: ۳۰px; width:۸۰%; bottom: ۳۰px; box-shadow: 0px 0px ۳۰px ۲۰px grey; } #snackbar .close { float:right; color:#FF0000; z-index: ۱; opacity: ۰.۶; margin-top: -۲۳px; margin-right: -۲۳px; } #snackbar .second { border-left: ۱px solid #FF0000 } #snackbar img { width:۲۰۰px; } #snackbar.show { visibility: visible; -webkit-animation: fadein ۰.۵s; animation: fadein ۰.۵s; } #snackbar.hide { -webkit-animation: fadeout ۰.۵s ۲.۵s; animation: fadeout ۰.۵s ۲.۵s; } @-webkit-keyframes fadein { from {bottom: ۰; opacity: ۰;} to {bottom: ۳۰px; opacity: ۱;} } @keyframes fadein { from {bottom: ۰; opacity: ۰;} to {bottom: ۳۰px; opacity: ۱;} } @-webkit-keyframes fadeout { from {bottom: ۳۰px; opacity: ۱;} to {bottom: ۰; opacity: ۰;} } @keyframes fadeout { from {bottom: ۳۰px; opacity: ۱;} to {bottom: ۰; opacity: ۰;} } |
- در انتها، کد جاوا اسکریپت خود را برای snackbar# ایجاد کنید تا جلوه ها نشان داده و پنهان شود.
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ |
var x = document.getElementById("snackbar"); setTimeout(function () { x.className = "show"; }, ۳۰۰۰); setTimeout(function () { x.className = x.className.replace("show", "hide"); }, ۱۵۰۰۰); $("#snackbar .close").click(function () { x.className = x.className.replace("show", "hide"); }); |
این کد جاوا اسکریپت Snakbar را پس از ۳ ثانیه بارگیری صفحه به طور خودکار نشان می دهد. و بعد از ۱۵ ثانیه به طور خودکار ناپدید می شود.
کد کامل:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ ۶۸ ۶۹ ۷۰ ۷۱ ۷۲ ۷۳ ۷۴ ۷۵ ۷۶ ۷۷ ۷۸ ۷۹ ۸۰ ۸۱ ۸۲ ۸۳ ۸۴ ۸۵ ۸۶ ۸۷ ۸۸ ۸۹ ۹۰ ۹۱ ۹۲ ۹۳ |
<html> <head> <style type="text/css"> #snackbar { visibility: hidden; background-color: #FFFFFF; text-align: center; border-radius: ۵px; padding: ۱۶px; position: fixed; z-index: ۱; bottom: ۳۰px; width:۸۰%; bottom: ۳۰px; box-shadow: 0px 0px ۳۰px ۲۰px grey; } #snackbar .close { float:right; color:#FF0000; z-index: ۱; opacity: ۰.۶; margin-top: -۲۳px; margin-right: -۲۳px; } #snackbar .second { border-left: ۱px solid #FF0000 } #snackbar img { width:۲۰۰px; } #snackbar.show { visibility: visible; -webkit-animation: fadein ۰.۵s; animation: fadein ۰.۵s; } #snackbar.hide { -webkit-animation: fadeout ۰.۵s ۲.۵s; animation: fadeout ۰.۵s ۲.۵s; } @-webkit-keyframes fadein { from {bottom: ۰; opacity: ۰;} to {bottom: ۳۰px; opacity: ۱;} } @keyframes fadein { from {bottom: ۰; opacity: ۰;} to {bottom: ۳۰px; opacity: ۱;} } @-webkit-keyframes fadeout { from {bottom: ۳۰px; opacity: ۱;} to {bottom: ۰; opacity: ۰;} } @keyframes fadeout { from {bottom: ۳۰px; opacity: ۱;} to {bottom: ۰; opacity: ۰;} } </style> </head> <body> <div class="container"> <h2 class="text-danger">Cool Snackbar/Toast demo</h2> <div id="snackbar"> <div class="close"><i class="fas fa-times-circle"></i></div> <div class="col-sm-6 col-xs-6 col-md-6"> <a hreflang="en-in" href="https://play.google.com/" target="_blank" > <img src="google-play-store.png" alt="Google Play Store"> </a> </div> <div class="col-sm-6 col-xs-6 col-md-6 second"> <a hreflang="en-in" href="http://youtube.com/" target="_blank" > <img src="aparat.png" alt="Aparat" > </a> </div> <div class="clearfix"></div> </div> </div> </body> <script> var x = document.getElementById("snackbar"); setTimeout(function () { x.className = "show"; }, ۳۰۰۰); setTimeout(function () { x.className = x.className.replace("show", "hide"); }, ۱۵۰۰۰); $("#snackbar .close").click(function () { x.className = x.className.replace("show", "hide"); }); </script> </html> |
نمونه کد دوم:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ ۶۸ |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #snackbar { visibility: hidden; min-width: ۲۵۰px; margin-left: -۱۲۵px; background-color: #۳۳۳; color: #fff; text-align: center; border-radius: ۲px; padding: ۱۶px; position: fixed; z-index: ۱; left: ۵۰%; bottom: ۳۰px; font-size: ۱۷px; } #snackbar.show { visibility: visible; -webkit-animation: fadein ۰.۵s, fadeout ۰.۵s ۲.۵s; animation: fadein ۰.۵s, fadeout ۰.۵s ۲.۵s; } @-webkit-keyframes fadein { from {bottom: ۰; opacity: ۰;} to {bottom: ۳۰px; opacity: ۱;} } @keyframes fadein { from {bottom: ۰; opacity: ۰;} to {bottom: ۳۰px; opacity: ۱;} } @-webkit-keyframes fadeout { from {bottom: ۳۰px; opacity: ۱;} to {bottom: ۰; opacity: ۰;} } @keyframes fadeout { from {bottom: ۳۰px; opacity: ۱;} to {bottom: ۰; opacity: ۰;} } </style> </head> <body> <h2>Snackbar / Toast</h2> <p>Snackbars are often used as a tooltips/popups to show a message at the bottom of the screen.</p> <p>Click on the button to show the snackbar. It will disappear after ۳ seconds.</p> <button onclick="myFunction()">Show Snackbar</button> <div id="snackbar">Some text some message..</div> <script> function myFunction() { var x = document.getElementById("snackbar"); x.className = "show"; setTimeout(function(){ x.className = x.className.replace("show", ""); }, ۳۰۰۰); } </script> </body> </html> |
میتوانید با کمک css به سفارشی سازی ظاهر SnackBar بپردازید.
مقاله به پایان رسید؛ همراه ما باشید با دیگر آموزش ها …
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید