آشنایی با کتابخانه جاوا اسکریپتی SweetAlert 2

کتابخانه SweetAlert برای بهبود تابع پیش فرض جاوا اسکریپت به نام ()alert تولید و رونمایی شد .

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

ابتدا برای استفاده باید این کتابخانه را در صفحه وب خود بارگذاری کنیم .

پیشنهاد می شود از سایت CDNJS برای سرعت بالای بارگذاری استفاده شود .

• آدرس صفحه کتابخانه SweetAlert2 در سایت CDNJS : لینک مشاهده

سرویس CDN چیست ؟

قبل از CDN ها اگر فایلی را در هاستی ذخیره می کردیم و میخواستیم از تمام نقاط دنیا به آن دسترسی داشته باشیم ، بستگی به نقطه جغرافیایی زمان بیشتری برای بارگذاری وقت صرف میشد .

با ظهور CDN سرور هایی در سرتاسر دنیا تعبیه شدند که وظیفه نگهداری فایل ها به صورت جهانی دارند .

برای مثال اگر فایلی در هاستی در آلمان باشد ، فردی که در آلمان است به راحتی می تواند به آن دسترسی داشته باشد و اگر در کشور دیگری مثل آمریکا هم کاربری درخواست داشت ، CDN کشور آمریکا یک نسخه از همان فایل در سرور آلمان را دارد و به جای اینکه درخواست از سمت آلمان پاسخ داده شود ، از همان سرور آمریکا درخواست پاسخ داده می شود . اینگونه است که سرعت بارگذاری فایل دیگر محدودیتی برایش ایجاد نمی شود .

حالا شروع میکنیم به ساخت اولین صفحه وب برای آزمایش کردن این کتابخانه

<!DOCTYPE html>
<html>
<head>
<!--SweetAlert2-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.28.4/sweetalert2.min.css" />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.28.4/sweetalert2.all.min.js" integrity="sha256-qtyU+b249rw/5PQ1KXGRtxjlgg6hfU2EK50YOlc0n50=" crossorigin="anonymous"></script>
</head>
<body dir="rtl">
    <button onclick="">نمایش پاپ آپ</button>
</body>
</html>

در قسمت بالا در تگ head دو فایل css و js کتابخانه مربوطه بارگذاری شد .

تگ script خاصیتی دارد که میتوان مشخص نمود بستگی به کاربرد آن ، که اسکریپت مورد نظر هنگام بارگذاری صفحه سایت ، بارگذاری شود یا بعد از بارگذاری صفحه سایت ، بارگذاری شود .

این دو خاصیت فوق async و defer نام دارند .

خاصیت integrity و crossorigin در تگ script به چه معناست ؟

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

خاصیت onclick به چه معناست ؟

در تگ button خاصیتی وجود داره به نام onclick که میتوان کد جاوا اسکریپتی در قالب تابعی نوشت و نام آن را در این خاصیت قرار داد . پس از کلیک کردن کاربر بر روی این دکمه آن تابع فراخوانی و اجرا می شود .

حالا اسکریپتی را می نویسیم که بتوانیم از کتابخانه استفاده کنیم .

<script>
function show_sw () {
    swal (
    'عنوان',
    'متن توضیحات',
    'نوع',
    )
}
</script>

حالا این تابع را فراخوانی میکنیم .

<!DOCTYPE html>
<html>
<head>
<!--SweetAlert2 CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.28.4/sweetalert2.min.css" />
<!--SweetAlert2 JavaScript-->
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.28.4/sweetalert2.all.min.js" integrity="sha256-qtyU+b249rw/5PQ1KXGRtxjlgg6hfU2EK50YOlc0n50=" crossorigin="anonymous"></script>

<script>
function show_sw() {
    swal (
    'عنوان',
    'متن توضیحات',
    'نوع',
    )
}
</script>
</head>
<body dir="rtl">
    <button onclick="show_sw()">نمایش پاپ آپ</button>
</body>
</html>

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

انواع پاپ آپ در کتابخانه SweetAlert2 به این گونه است :

لیست option های بیشتر و کاربردی :

type : نوع پاپ آپ

title : عنوان

html : امکان نوشتن اچ تی ام ال در بخش متن توضیحات

footer : نوشتن پانویس به صورت ساده یا اچ تی ام ال

imageUrl : جایگزین آیکون پاپ آپ با تصویر

imageHeight : ارتفاع تصویر

imageWidth : عرض تصویر

imageAlt : نام جایگزین تصویر در صورت لود نشدن تصویر

animation : فعال یا غیر فعال کردن استفده از انیمیشن در پاپ آپ

showCancelButton : نمایش دکمه انصراف

showCloseButton : نمایش دکمه بستن پنجره

showConfirmButton : نمایش دکمه تایید

background : تغییر پس زمینه پاپ آپ

confirmButtonText : متن دکمه تایید

cancelButtonText : متن دکمه انصراف

focusConfirm : فوکوس کردن بر روی دکمه تایید

timer : ایجاد تایمر بسته شدن پنجره

reverseButtons : جا به جا کردن دکمه های انصراف و تایید

customClass : فراخوانی یک کلاس برای پاپ آپ

و خیلی امکانات دیگر ...

• سایت مرجع کتابخانه SweetAlert2 : لینک مشاهده
• فایل پاورپوینتی آشنایی با این کتابخانه : لینک دریافت
• فایل PDF آشنایی با این کتابخانه : لینک دریافت

نمونه آزمایشی از مثال استفاده از کتابخانه SweetAlert2 که در سایت CodePen منتشر کردم و قابل دسترسی است : لینک مشاهده

سایت کدپن سایتی که محیط وبی با تکنولوژی های HTML و CSS و JS می دهد تا بتوانید کد های خود را به صورت زنده در آن مشاهده و حتی خطا یابی کنید .

ویدیوی آموزشی این کتابخانه از سایت آپارات