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

Ali Majrashiمنذ 9 سنوات

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

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

رسائل الخطأ التقليدية تعتمد على متصفحك لنفرض ان لديك متصفح safari وقمت بصميم صفحتك وحدث خطأ واستخدمت الدالة 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("Here's a message!")

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


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: "Sweet!",
text: "Here's a custom image.",
imageUrl: "images/thumbs-up.jpg"
});

من مميزات SweetAlert

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

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

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

Download files

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