رسائل الخطأ Alert التقليدية و SweetAlert

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

لعرض alert في جافا سكريبت

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

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

ولكن باستخدام مكتبة 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 وهو swal وعن طريق هذه الدالة ايضا تسطيع التعامل مع كل إمكانيات المكتبة مثلا تسطيع عرض رسائل عادية

swal("Hello Word!")

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

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

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

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");
});

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

swal({   
title: "Success!",
text: "Congratulations.",
imageUrl: "images/green-yes.jpg"
});

من مميزات SweetAlert

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

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

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