آموزش پلاگین هشدار در بوت استرپ
آموزش پلاگین هشدار در بوت استرپ
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش پلاگین هشدار در بوت استرپ خواهیم پرداخت.
پیام های هشدار بیشتر برای نمایش اطلاعاتی مانند پیام های هشدار یا تأیید به کاربران نهایی استفاده می شوند. با استفاده از افزونه پیام هشدار می توانید قابلیت حذف را به همه پیام های هشدار اضافه کنید.
اگر می خواهید این قابلیت پلاگین را به صورت جداگانه در آن بگنجانید ، به alert.js نیاز خواهید داشت. در غیر این صورت ، همانطور که در فصل بررسی اجمالی افزونه های بوت استرپ ذکر شده است ، می توانید bootstrap.js یا minst bootstrap.min.js را در آن قرار دهید.
کاربردها
به دو روش زیر می توانید رد هشدار را فعال کنید –
- از طریق ویژگی های داده – برای رد کردن از طریق Data API فقط به دکمه بستن خود داده data-remove = “alert” را اضافه کنید تا به طور خودکار قابلیت بسته شدن هشدار را ارائه دهید.
1 2 3 |
<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true"> &times; </a> |
- از طریق JavaScript – برای رد کردن از طریق JavaScript از دستور زیر استفاده کنید –
1 |
$(".alert").alert() |
مثال
مثال زیر استفاده از افزونه هشدار از طریق ویژگی های داده را نشان می دهد.
1 2 3 4 5 6 7 |
<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> |
گزینه ها
در اینجا هیچ گزینه ای وجود ندارد.
متدها
در زیر چند روش مفید برای افزونه هشدار وجود دارد –
متد | توضیح | مثال | ||
---|---|---|---|---|
()alert. | این روش همه هشدارها را با عملکرد نزدیک بسته بندی می کند. |
|
||
Close Method .alert(‘close’) | برای اینکه همه هشدارها بسته شود ، این روش را اضافه کنید. |
|
مثال
مثال زیر استفاده از روش ()alert. را نشان می دهد –
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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’). را نشان می دهد –
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
این کد را با استفاده از ویرایشگر Try it امتحان کنید. می بینید که قابلیت بستن روی همه پیام های هشدار اعمال می شود ، یعنی هر پیام هشدار را ببندید ، بقیه پیام های هشدار نیز بسته می شوند.
رویداد ها
جدول زیر رویدادهای کار با افزونه هشدار را لیست می کند. این رویداد ممکن است برای اتصال به عملکرد هشدار استفاده شود.
رویداد | مثال | مثال | ||
---|---|---|---|---|
close.bs.alert | این رویداد با فراخوانی روش close instance بلافاصله آغاز می شود. |
|
||
closed.bs.alert | این رویداد با بسته شدن هشدار فعال می شود (منتظر می ماند تا انتقال CSS کامل شود). |
|
مثال
مثال زیر رویدادهای افزونه هشدار را نشان می دهد –
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
لیست جلسات قبل آموزش بوت استرپ
- آموزش بوت استرپ
- بررسی اجمالی بوت استرپ
- آموزش راه اندازی بوت استرپ
- آموزش سیستم شبکه در بوت استرپ
- بررسی اجمالی CSS در بوت استرپ
- آموزش تایپوگرافی در بوت استرپ
- آموزش کد در بوت استرپ
- آموزش جدول در بوت استرپ
- آموزش فرم ها در بوت استرپ
- آموزش دکمه ها در بوت استرپ
- آموزش تصاویر در بوت استرپ
- آموزش کلاس های کمکی در بوت استرپ
- آموزش ابزارهای پاسخگو در بوت استرپ
- آموزش Glyphicons در بوت استرپ
- آموزش منوهای کشویی در بوت استرپ
- آموزش گروه های دکمه ای در بوت استرپ
- آموزش گروه های ورودی در بوت استرپ
- آموزش عناصر ناوبری در بوت استرپ
- آموزش Navbar در بوت استرپ
- آموزش Breadcrumbs در بوت استرپ
- آموزش صفحه بندی در بوت استرپ
- آموزش لیبل ها در بوت استرپ
- آموزش بج ها در بوت استرپ
- آموزش Jumbotron در بوت استرپ
- آموزش تصاویر کوچک در بوت استرپ
- آموزش هشدارها در بوت استرپ
- آموزش نوارهای پیشرفت در بوت استرپ
- آموزش شی Media در بوت استرپ
- آموزش گروه لیست در بوت استرپ
- آموزش پانل ها در بوت استرپ
- آموزش well در بوت استرپ
- بررسی اجمالی پلاگین ها در بوت استرپ
- آموزش پلاگین انتقال در بوت استرپ
- آموزش پلاگین Modal در بوت استرپ
- آموزش پلاگین Dropdown در بوت استرپ
- آموزش پلاگین Scrollspy در بوت استرپ
- آموزش پلاگین تب در بوت استرپ
- آموزش پلاگین tooltip ابزار در بوت استرپ
- آموزش پلاگین Popover در بوت استرپ
دیدگاه شما