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

آموزش ایجاد پیام های اخطار با bootstrap

در این آموزش فراخواهید گرفت چگونه پیام های هشدار با تویتر بوت استرپ ایجاد کنید.

ایجاد پیام های اخطار با تویتر بوت استرپ

پیام های اخطار اغلب برای برجسته کردن اطلاعاتی به کار می رود که نیاز به توجه فوری کاربر ها مانند هشدار یا پیام های تایید دارند.

پیام های هشدار

شما می توانید با استفاده از گروه یک .alert پیام هشدار ساده ایجاد کنید. برای بستن جعبه ی پیام هشدار نیز میتوانید یک دکمه ی خروج گزینه ای اضافه کنید.

مثال:

    
× Warning! There was a problem with your network connection.

خروجی مثال بالا مانند تصویر زیر خواهد بود:

Bootstrap

به طور مشابه می توانید پیام های هشدار دیگری ایجاد کنید.

هشدارهای خطا یا خطر:

با اضافه کردن گروه .alert-error به گروه پایه ی .alert می توانید پیام های هشدار خطا یا خطر ایجاد کنید.

مثال:

 
   
× Error! A problem has been occurred while submitting your data.

خروجی مثال بالا مانند تصویر زیر خواهد بود:

Bootstrap

هشدارهای تایید یا موفقیت:

برای ایجاد پیام های هشدار تایید یا موفقیت می توانید گروه .alert-success را به گروه پایه ی .alert اضافه کنید.

مثال:

  
  
× Success! Your message has been sent successfully.

خروجی مثال بالا مانند تصویر زیر خواهد بود:

Bootstrap

هشدارهای اطلاعات:

برای پیام های هشدارهای اطلاعات یک گروه .alert-info به گروه پایه ی .alert اضافه کنید.

مثال:

 
× Success! Your message has been sent successfully.

خروجی مثال بالا مانند تصویر زیر خواهد بود:

Bootstrap

خروج از هشدارها از طریق ویژگی های داده:

ویژگی های داده (data attributes) یک راه آسان برای فعال کردن عملکرد بستن جعبه ی پیام هشدار ارائه می دهد - data-dismiss="alert" را به دکمه ی بستن اضافه کنید و این عمل به طور خودکار خروج از یک جعبه هشدار را فعال می کند.

مثال:

 
   ×
×

هشدارهای خروج از طریق جاوا اسکریپت

ممکن است خروج از یک هشدار را ازطریق جاوا اسکریپت نیز فعال کنید.

مثال:

        $(function () {

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

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

            });

        });

  

روش ها:

این ها روش های استاندارد هشدارهای بوت استرپ می باشند.

$().alert()

این روش همه ی هشدارها را با عملکرد close پوشش می دهد.

مثال:

    
        $(document).ready(function () {

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

                alert("ghc");               

            });

        });


نکته:

اگر می خواهید تغییر را در جعبه ی پیام های هشدار خود در هنگام بستن فعال کنید، مطمئن شوید که گروه .fade و .in را روی آن به کار گرفته اید.

.alert('close')

این روش جعبه پیام هشدار را می بندد.

مثال:

        $(document).ready(function () {

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

                alert('close');

            });

        });

رویدادها

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

Description
Event
زمانیکه روش close instance فراخوانده می شود، این رویداد فورا اتفاق می افتد.
close.bs.alert
زمانیکه جعبه ی پیام هشدار بسته شده است، این رویداد اتفاق می افتد. این رویداد تا زمان کامل شدن فرایند تغییر CSS منتظر می ماند.
closed.bs.alert

مثال زیر پیام هشدار کامل شدن تغییر محو یک جعبه ی پیام هشدار را به کاربر نشان می دهد.

مثال:

        $(document).ready(function () {
            $("#myAlert").on('closed.bs.alert', function () {
                alert("Alert message box has been closed.");
            });
        });
  • 1381
  •    1870
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

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

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .