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

کتابخانه جاوا اسکریپتی SweetAlert نسخه شماره 2کتابخانه SweetAlert برای بهبود تابع پیش فرض جاوا اسکریپت به نام ()alert تولید و رونمایی شد .این کتابخانه با فریمورک بوت استرپ و سیستم عامل های موبایلی هم سازگار شده است .سازگاری با React و Angularابتدا برای استفاده باید این کتابخانه را در صفحه وب خود بارگذاری کنیم .پیشنهاد می شود از سایت CDNJS برای سرعت بالای بارگذاری استفاده شود .آدرس صفحه کتابخانه SweetAlert2 در سایت CDNJS : لینک مشاهدهسرویس CDN چیست ؟مفهوم کلی از سرویس 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 منتشر کردم و قابل دسترسی است : لینک مشاهدهمحیط ویرایشگر آنلاین کد CodePenسایت کدپن سایتی که محیط وبی با تکنولوژی های HTML و CSS و JS می دهد تا بتوانید کد های خود را به صورت زنده در آن مشاهده و حتی خطا یابی کنید . https://codepen.io/senseofsecurity/embed/ZqORPe/?height=265&theme-id=0&default-tab=js,result&embed-version=2 ویدیوی آموزشی این کتابخانه از سایت آپارات https://www.aparat.com/v/bFuDd