جلسه چهل ام از دوره آموزش Bootstrap : پلاگین Alert

پلاگین Alert

پلاگین های بوت استرپ

پیام های هشدار اغلب برای نمایش اطلاعاتی مانند پیام های هشدار دهنده یا پیام هایی جهت تأیید کاربران نهایی استفاده می شود. با استفاده از پلاگین alert message می توانیم قابلیت بستن پیام های هشدار را اضافه کنیم.

اگر بخواهیم که این پلاگین را به صورت جداگانه وارد کنیم ، در این صورت به فایل alert.js نیاز خواهیم داشت. در غیر این صورت ،  همان طور که در مقاله "مروری بر پلاگین های بوت استرپ" ذکر شد ، می توانیم از یکی از فایل های bootstrap.js یا bootstrap min.js.min.js استفاده نماییم.

نحوه کاربرد

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

• از طریق ویژگی های داده : برای خارج کردن پیام هشدار از صفحه از طریق Data API ، فقط کافی است که مقدار "data-dismiss=”alert را به کلید close اضافه کنیم تا به طور خودکار یک پیام با قابلیت بستن را به ما بدهد.

<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   &times;
</a>

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

$(".alert").alert()

مثال

مثال زیر ، نحوه کاربرد پلاگین alert از طریق ویژگی های داده را نشان می دهد :

<div class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>
   
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

خروجی قطعه کد فوق به صورت زیر می باشد :

آپشن ها

این پلاگین آپشنی (option) ندارد.

متدها

برخی از متدهای کاربردی برای پلاگین alert به شرح جدول زیل می باشند :

$('#identifier').alert();

$('#identifier').alert('close');

نکته : برای فعال کردن حالت انیمیشن در هنگام بستن هشدارها ، باید مطمئن شویم که کلاس های ..fade و .in قبلاً به آنها اعمال شده باشد.

مثال

مثال زیر کاربرد متد .alert() را نشان می دهد :

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert();
      });
   });  
</script> 

خروجی قطعه کد فوق به صورت زیر می باشد :

مثال زیر کاربرد متد .alert(‘close’) را نشان می دهد :

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert('close');
      });
   });  
</script>

می توانید ببینید که قابلیت close به همه پیام های هشدار اعمال می شود ، یعنی بستن هر پیام هشدار موجب بسته شدن بقیه پیام های هشدار نیز می شود.

خروجی قطعه کد فوق به صورت زیر می باشد :

رویدادها

در جدول زیر لیست رویدادهایی که با پلاگین alert کار می کنند ، آورده شده است. این رویدادها ممکن است به تابع alert متصل شوند.

$('#myalert').bind('close.bs.alert', function () {

   // do something

})

$('#myalert').bind('closed.bs.alert', function () {

   // do something

})

مثال

مثال زیر رویدادهای پلاگین alert را نشان می دهد :

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<script type = "text/javascript">
   $(function(){
      $("#myAlert").bind('closed.bs.alert', function () {
         alert("Alert message box is closed.");
      });
   });
</script> 

خروجی قطعه کد فوق به صورت زیر می باشد :