آموزش ساخت 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: 5px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    bottom: 30px;
    width:80%;
    bottom: 30px;
    box-shadow: 0px 0px 30px 20px grey;
}
#snackbar .close {
	float:right;
	color:#FF0000;
	z-index: 1;
	opacity: 0.6;
	margin-top: -23px;
    margin-right: -23px;
}
#snackbar .second {
	border-left: 1px solid #FF0000
}
#snackbar img {
	width:200px;
}
#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s;
    animation: fadein 0.5s;
}
#snackbar.hide {
    -webkit-animation: fadeout 0.5s 2.5s;
    animation: fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

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

    var x = document.getElementById("snackbar");
    setTimeout(function () {
        x.className = "show";
    }, 3000);
    setTimeout(function () {
        x.className = x.className.replace("show", "hide");
    }, 15000);
    $("#snackbar .close").click(function () {
        x.className = x.className.replace("show", "hide");
    });

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

مطلب پیشنهادی: آموزش طراحی قالب وردپرس – قسمت چهارم(footer.php)

کد کامل:

<html>
<head>
<style type="text/css">
#snackbar {
    visibility: hidden;
    background-color: #FFFFFF;
    text-align: center;
    border-radius: 5px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    bottom: 30px;
    width:80%;
    bottom: 30px;
    box-shadow: 0px 0px 30px 20px grey;
}
#snackbar .close {
	float:right;
	color:#FF0000;
	z-index: 1;
	opacity: 0.6;
	margin-top: -23px;
    margin-right: -23px;
}
#snackbar .second {
	border-left: 1px solid #FF0000
}
#snackbar img {
	width:200px;
}
#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s;
    animation: fadein 0.5s;
}
#snackbar.hide {
    -webkit-animation: fadeout 0.5s 2.5s;
    animation: fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}
</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";
    }, 3000);
    setTimeout(function () {
        x.className = x.className.replace("show", "hide");
    }, 15000);
    $("#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: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
</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 3 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", ""); }, 3000);
}
</script>

</body>
</html>

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

مطلب پیشنهادی: دانلود سورس AndroidNewsApp - اندروید

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

موفق باشید.