• بخش 36 – طراحی وب واکنش گرا ، Alert Message در Bootstrap
بخش 36 – طراحی وب واکنش گرا ، Alert Message در Bootstrap
1395/02/25 - 21:23:46 // Responsive Web Design // 0 نظر // 3595 بازدید

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

بخش 36 طراحی وب واکنش گرا ، Alert Message در Bootstrap

بوت استرپ bootstrap با کامپوننت های نمایش هشدار متنوعی در بخش های مختلف وب سایت آمده است . شما می توانید از آن ها برای نمایش پیام های هشدار ، موفقیت ، خطا ، و یا اطلاعات استفاده نمایید . این پیام ها ممکن است بعد از نمایش برای کاربران ایجاد مزاحمت کند . برای اینکه این مزاحمت را رفع کنیم ساختاری برای آن ها در نظر می گیریم که کاربر بتواند آن پیام را پنهان کند .

در این قسمت ما طریقه ی نمایش یک پیام هشدار را به شما یاد داده و همچنین طریقه ی حذف پیام را آموزش می دهیم .

در زیر کد مربوط به یک پیام موفقیت را مشاهده می کنید :

هر پیام باید دارای یک کلاس alert باشد ، همچنین باید یک کلاس متن داشته باشد که در اینجا این کلاس با عنوان alert-success مشاهده می گردد . چهار کلاس نمایش متن داریم که در ادامه مشاهده می کنید :

1- Alert-success

2- Alert-info

3- Alert-danger

4- Alert-warning

پیامی که در بالا نوشتیم دارای متد حذف نمی باشد . و بصورت زیر نشان داده می شود .

کد مربوط به پیام هشداری که قابلیت حذف داشته باشد را در زیر می بینید :

و اجرای این کد را می بینید :

برای ساخت یک پیام هشدار با قابلیت حذف ، ما نیاز به افزودن کلاس alert-dismissable به باکس پیام خواهیم داشت . و سپس نیاز به یک دکمه جهت بستن پیام بعد از کلیک روی آن داریم . دکمه ی ما باید دارای خصیصه ی data-dismiss بوده تا به کامپوننت بوت استرپ bootstrap بگوید هنگام کلیک پیام هشدار را ببندد . بوت استرپ bootstrap این دکمه را در بخش بالای سمت راست نمایش داده و این دکمه دارای کلاس close می باشد . عمل بستن این پیام در بوت استرپ bootstrap توسط جاوا اسکریپت و تبدیل خصیصه ی data-dismiss صورت خواهد گرفت .

 

استفاده از لینک در میان یک پیام هشدار

اگر شما می خواهید که یک لینک را در یک پیام هشدار بکار گیرید ، نیاز به افزودن کلاس alert-link به المان a دارید . این کار یک رنگ برای لینک مورد نظر ایجاد کرده که به رنگ پیام هشدار توجه خواهد کرد .

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

پیام هشدار با استفاده از جاوا اسکریپت

شما همچنین می توانید یک پیام هشدار را در بوت استرپ با استفاده از jquery و متد alert() ببندید .

یک پیام هشدار دارای دو رویداد بهمراه خود می باشد .

1- Close.bs.alert : که درست قبل از بستن پیام هشدار اتفاق خواهد افتاد .

2- Closed.bs.alert : بعد از بسته شدن پیام هشدار رخ خواهد داد .

یک مثال از رویدادهای بالا را در زیر می بینید :

که بعد از اجرای کد در مرورگر و سپس کلیک کردن روی دکمه ی close و مشاهده ی کنسول متوجه ی رخ دادن رویدادهای مورد نظر خواهید شد :

دانلود سورس تمرین این قسمت

شاد و سلامت باشید

محمد جعفری فوتمی

محمد جعفری فوتمی
معرفی نویسنده : محمد جعفری فوتمی

از سال 1382 بطور تخصصی در زمینه ی طراحی وب سایت کار کرده ام و در طی 12 سال گذشته تجربیاتی را کسب کرده ام که در هیچ کتاب و منبع آنلاینی یافت نمی شود ، تصمیم گرفته ام تا این تجربیات را در قالب مقالاتی به اشتراک بگذارم . امیدوارم مفید واقع شود .

امتیاز به مطلب
           
نظرات کاربران
ارسال نظر