عرض رسائل التحذير بشكل جميل مع sweetAlert

Ali Majrashiمنذ 4 سنوات

يمكنك إستبدال رسائل التحذير التقليدية برسائل جميلة وجذابة بإستخدام sweetAlert عند التعامل مع المستخدمين فإن عرض رسائل الخطأ او التحذير وحتى التاكيد أحد أهم الأساليب لتنبيه المستخدم بما يحدث او التاكد قبل تنفيذ أمر ما و من خلال sweetAlert يمكنك عرض هذه الرسائل وجعلها من أهم اساليب جذب المستخدم بحيث انها ستعرض الرسالة بشكل جميل وبايقونات توضح نوع الخطأ وأيضا تضيف حركة animation لنوع الخطأ لتظهر رسائلك دائما بشكل جذاب وانيق وتسطيع التفاعل مع المستخدم عن طريق المكتبة بكل سهولة وسلاسة 

الفرق بين رسائل الخطأ Alert التقليدية و sweetAlert 

رسائل الخطأ التقليدية تعتمد على متصفحك لنفرض ان لديك متصفح safari وقمت بصميم صفحتك وحدث خطأ واستخدمت الدالة alert لعرضه


alert("Oops... Something went wrong!");

فإن ناتج هذه الدالة في المتصفح ستكون بهذا الشكل 

alert.png

ولكن باستخدام مكتبة SweetAlert وتضمين ملف sweetalert.min.js و ملف sweetalert.css  داخل صفحتك 


<script src="dist/sweetalert.min.js"></script> 
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">

تسطيع التعامل مع المكتبة لعرض رسائل الخطأ باستخدام الدالة sweetAlert


sweetAlert("Oops...", "Something went wrong!", "error");

ليكون الناتج كالتالي 

SweetAlert.png

كما انه يوجد إختصار للدالة sweetAlert وهو swal وعن طريق هذه الدالة ايضا تسطيع التعامل مع كل إمكانيات المكتبة مثلا تسطيع عرض رسائل عادية


swal("Here's a message!")

basicMessage.png

وايضا عرض رسالة بعد تنفيذ أمر بنجاح


swal("Good job!", "You clicked the button!", "success")

successMessage.png

وتسطيع ايضا عرض رسائل الخطأ مع ربط دالة لتنفذ أوامرها إذا تم تاكيد الأمر بالضغط على زر التاكيد مباشرة 


swal({   
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false 
},
function(){   
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});

warningMessage.png

وتسطيع عرض رسائل بايقونات خاصة تحدد أنت مسارها داخل مشروعك 


swal({   
title: "Sweet!",
text: "Here's a custom image.",
imageUrl: "images/thumbs-up.jpg"
});

specialImage.png

من مميزات SweetAlert

من ميزاتها ان الرسائل سوف تعرض مباشرة في منتصف الصفحة وسيكون شكلها جذاب دائما المكتبة تدعم جميع الشاشات سواء كنت تستخدم شاشة كمبيوتر او موبايل او تابلت فإن الرسائل سوف تعرض بشكل جميل وأنيق وتسطيع تجربتها بكل سهولة وأيضا تسطسع تحديد Timer بعده تختفي الرسالة بدون تدخل المستخدم وتستطيع تعريف دوال يتم تنفيذها عند التاكيد او الإلغاء 

تحميل المكتبة

لتحميل المكتبة يمكنك بكل سهولة عن طريق هذا الرابط 
 

Download files
 

او عن طريق bower باستخدام هذا الامر 


bower install sweetalert

او عن طريق NPM باستخدام هذا الامر 


npm install sweetalert

ويمكنك زيارة الموقع لمشاهدة الأمثلة وبقية إعدادات واستخدامات المكتبة SweetAlert

أو زيارة صفحة المكتبة SweetAlert on GitHub

كلمات دليلية:
1
إعجاب
2264
مشاهدات
0
مشاركة
0
متابع
متميز
محتوى رهيب

التعليقات (2)

محمود الزهراني:

مكتبة جميلة جداً , راح استخدمها ان شاء الله تعالى في مشاريعي القادمة :)

 

ماقصرت يا استاذ علي 

Ali Majrashi:

مكتبة جميلة جداً , راح استخدمها ان شاء الله تعالى في مشاريعي القادمة :)

 

ماقصرت يا استاذ علي 

يعافيك ربي يارب تفيدك بكل مشاريعك والقادم مذهل باذن الله 

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !