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

4 سال پیش

امتیاز دهید post

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

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

پیام های هشدار بیشتر برای نمایش اطلاعاتی مانند پیام های هشدار یا تأیید به کاربران نهایی استفاده می شوند. با استفاده از افزونه پیام هشدار می توانید قابلیت حذف را به همه پیام های هشدار اضافه کنید.

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

کاربردها

به دو روش زیر می توانید رد هشدار را فعال کنید –

از طریق ویژگی های داده – برای رد کردن از طریق Data API فقط به دکمه بستن خود داده data-remove = “alert” را اضافه کنید تا به طور خودکار قابلیت بسته شدن هشدار را ارائه دهید.

&lt;a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true"&gt;
   &amp;times;
&lt;/a&gt;

&times;

</a>

از طریق JavaScript – برای رد کردن از طریق JavaScript از دستور زیر استفاده کنید –

$(".alert").alert()

1	$(".alert").alert()

مثال

مثال زیر استفاده از افزونه هشدار از طریق ویژگی های داده را نشان می دهد.

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

&times;

</a>

<strong>Warning!</strong> There was a problem with your network connection.

</div>

گزینه ها

در اینجا هیچ گزینه ای وجود ندارد.

متدها

در زیر چند روش مفید برای افزونه هشدار وجود دارد –

متد

توضیح

مثال

()alert.

این روش همه هشدارها را با عملکرد نزدیک بسته بندی می کند.

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

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

Close Method .alert(‘close’)

برای اینکه همه هشدارها بسته شود ، این روش را اضافه کنید.

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

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

مثال

مثال زیر استفاده از روش ()alert. را نشان می دهد –

&lt;h3&gt;Alert messages to demonstrate alert() method &lt;/h3&gt;

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

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

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

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

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

<strong>Success!</strong> the result is successful.

</div>

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

<strong>Warning!</strong> There was a problem with your network connection.

</div>

$(function(){

$(".close").click(function(){

$("#myAlert").alert();

});

</script>

مثال زیر استفاده از روش alert(‘close’). را نشان می دهد –

&lt;h3&gt;Alert messages to demonstrate alert('close') method &lt;/h3&gt;

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

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

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

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

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

<strong>Success!</strong> the result is successful.

</div>

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

<strong>Warning!</strong> There was a problem with your network connection.

</div>

$(function(){

$(".close").click(function(){

$("#myAlert").alert('close');

});

</script>

این کد را با استفاده از ویرایشگر Try it امتحان کنید. می بینید که قابلیت بستن روی همه پیام های هشدار اعمال می شود ، یعنی هر پیام هشدار را ببندید ، بقیه پیام های هشدار نیز بسته می شوند.

رویداد ها

جدول زیر رویدادهای کار با افزونه هشدار را لیست می کند. این رویداد ممکن است برای اتصال به عملکرد هشدار استفاده شود.

رویداد

مثال

close.bs.alert

این رویداد با فراخوانی روش close instance بلافاصله آغاز می شود.

$('#myalert').bind('close.bs.alert', function () {
   // do something
})

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

// do something

})

closed.bs.alert

این رویداد با بسته شدن هشدار فعال می شود (منتظر می ماند تا انتقال CSS کامل شود).

$('#myalert').bind('closed.bs.alert', function () {
   // do something
})

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

// do something

})

مثال

مثال زیر رویدادهای افزونه هشدار را نشان می دهد –

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

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

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

<strong>Success!</strong> the result is successful.

</div>

$(function(){

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

alert("Alert message box is closed.");

});

</script>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش بوت استرپ آموزش طراحی وب سایت

نویسنده مطلب saber

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

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

کاربردها

مثال

گزینه ها

متدها

مثال

رویداد ها

مثال

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

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

کاربردها

مثال

گزینه ها

متدها

مثال

رویداد ها

مثال

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه