sweetalert2 یه کتابخانه جاوااسکریپته که به جای پنجره های پیش فرض مرورگر، یعنی alert و confirm و prompt، پنجره های پیام، تایید و ورودی تمیز و ریسپانسیو نشون می ده. ظاهرش قابل تنظیمه و طبق معرفی رسمی از دسترس پذیری WAI-ARIA پشتیبانی می کنه. سازنده اش Limon Monte و مجوزش MIT هست.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
sweetalert2 یه کتابخانه جاوااسکریپت برای نمایش پنجره های هشدار، تایید و دریافت ورودیه. مشکلی که حل می کنه آشناست: پنجره های alert و confirm خود مرورگر ظاهر خشک و ثابتی دارن، رنگ و فونتشون دست تو نیست و تا کاربر جواب نده، کل صفحه رو قفل می کنن. فرض کن توی پنل مدیریت فروشگاهت می خوای بپرسی «مطمئنی این سفارش حذف بشه؟». با sweetalert2 یه پنجره مرتب با آیکون، عنوان و دکمه های تایید و انصراف می گیری که به قالب سایتت هم می خوره.
کارهایی که باهاش می شه کرد کم نیست. می تونی پیام موفقیت، خطا، هشدار، اطلاعات و سوال رو با آیکون مخصوص نشون بدی، متن دکمه ها رو عوض کنی، یه فیلد ورودی توی پنجره بذاری یا پنجره رو بعد از چند ثانیه خودکار ببندی. حالت toast هم داره، یعنی اعلان کوچیکی که گوشه صفحه ظاهر می شه و بعد از چند لحظه می ره، مثل «محصول به سبد اضافه شد». جواب کاربر هم به کدت برمی گرده و می تونی بر اساسش تصمیم بگیری حذف انجام بشه یا نه.
این کتابخانه برای مدیرهای سایت و توسعه دهنده هایی خوبه که توی قالب وردپرس، پنل مدیریت، داشبورد یا یه پروژه جاوااسکریپتی ساده، پیام و تاییدیه مرتب لازم دارن. جایی که کم میاره، فرم های بلند و چندمرحله ای یا پنجره هایی با محتوای سنگینه. برای اون ها یه مودال معمولی منطقی تره. اگه هم سایتت فقط یه پیام ساده لازم داره، قبل از اضافه کردن یه کتابخانه جدید یه بار فکر کن.
چند نکته برای سایت های فارسی. متن دکمه ها و پیام ها رو خودت می نویسی، پس فارسی کردنشون مشکلی نداره. ولی جهت راست به چپ و فونت سایتت رو حتما توی مرورگر تست کن تا پنجره ها درست دیده بشن. نکته مهم دیگه اینه که فایل های کتابخانه رو روی هاست خودت بذاری و از CDN خارجی نخونی. وگرنه روزهایی که اینترنت بین الملل مشکل داره، کتابخانه لود نمی شه، کدی که Swal رو صدا می زنه خطا می ده و دکمه های سایتت کار نمی کنن. نسخه های رسمی و بدون تغییر sweetalert2 توی مخزن داخلی ما هم در دسترسه.
راهنمای استفاده
نصب sweetalert2 پیچیده نیست. قدم های کلی این هاست:
فایل جاوااسکریپت و فایل CSS کتابخانه رو با کد آماده پایین همین صفحه به صفحه ات اضافه کن. اگه با npm کار می کنی، بسته sweetalert2 رو نصب کن و توی پروژه import کن.
توی وردپرس، فایل ها رو توی پوشه قالب یا افزونه خودت بذار و با wp_enqueue_script و wp_enqueue_style لود کن. تگ دستی توی هدر نذار.
بعد از لود فایل ها، با تابع Swal.fire پنجره رو باز کن. حداقلش یه عنوان، یه متن و یه آیکون می خواد.
برای پنجره تایید، گزینه showCancelButton رو روشن کن و متن دکمه ها رو فارسی بنویس.
جواب کاربر رو بگیر و isConfirmed رو چک کن. فقط وقتی true بود، کار اصلی مثل حذف یا ارسال رو انجام بده.
یه توصیه ساده: اول با یه پیام ساده امتحانش کن تا مطمئن بشی فایل ها درست لود شدن. بعدش سراغ رنگ، تایمر و فیلد ورودی برو. اگه چیزی نشون داده نشد، کنسول مرورگر رو باز کن و ببین خطای لود فایل داری یا نه.
نشانی مستقیم فایل اصلی 8.19.1https://mirror.wbweb.ir/npm/sweetalert2@8.19.1/dist/sweetalert2.all.min.js
پرسش‌های رایج
یه کتابخانه جاوااسکریپته که پنجره های پیش فرض alert و confirm و prompt مرورگر رو با پنجره های زیباتر و قابل تنظیم عوض می کنه. برای پیام موفقیت و خطا، تایید حذف، گرفتن یه ورودی ساده و نمایش اعلان کوچیک توی پنل ها و سایت ها استفاده می شه. مزیتش اینه که بدون کد زیاد، ظاهر پیام ها به قالب سایتت می خوره.
sweetalert2 ادامه همون ایده است و طبق معرفی رسمی خودش، فورک نگهداری شده ی sweetalert قدیمیه. یعنی همون کارها رو انجام می ده، ولی پروژه فعال تری داره. اگه پروژه جدیدی شروع می کنی، sweetalert2 رو انتخاب کن و به نسخه قدیمی تکیه نکن.
بله. فایل های جاوااسکریپت و CSS رو توی قالب یا افزونه خودت می ذاری و با wp_enqueue_script و wp_enqueue_style لود می کنی. بعدش از کد جاوااسکریپت قالب یا افزونه ات پنجره ها رو باز می کنی. فقط حواست باشه افزونه های دیگه ای که از همین کتابخانه استفاده می کنن باهاش تداخل نداشته باشن.
اگه فایل های کتابخانه روی هاست خودت باشن، بله، چون به منبع خارجی وابسته نیست. مشکل وقتیه که از CDN خارجی لود کنی و اتصال بین الملل مختل بشه. برای همین بهتره فایل ها رو از مخزن داخلی ما بگیری و روی هاست خودت بذاری.
متن پنجره ها و دکمه ها رو خودت می نویسی، پس فارسی کردنشون ساده است. ولی چیدمان و فونت به CSS سایتت بستگی داره. بعد از اضافه کردن کتابخانه، چند نوع پنجره رو توی مرورگر امتحان کن و اگه لازم شد، با کلاس های سفارشی ظاهرشون رو درست کن.
prebid-universal-creative یه بسته جاوااسکریپتیه که تبلیغ برنده رو توی سایت هایی با Prebid و هدر بیدینگ نشون می ده. این کد توی کریتیو اد سرور قرار می گیره و بعد از تموم شدن مزایده، تبلیغ رو توی جایگاه نشون می ده. مجوزش Apache هست و نسخه رسمی ش توی مخزن ما موجوده.
workbox-cdn یه بسته آماده از کتابخونه Workbox گوگله که بدون ابزار build و فقط با بارگذاری یه اسکریپت می تونی توی سایتت استفاده کنی. با Workbox سرویس ورکر رو راحت تر می نویسی، کش و حالت آفلاین رو مدیریت می کنی و بازدیدهای بعدی سایتت سریع تر باز می شن.
mathjax یه کتابخانه متن باز جاوااسکریپته که فرمول های ریاضی رو توی مرورگر نمایش می ده. فرمولی که با LaTeX، MathML یا AsciiMath نوشتی رو به متن تیز، قابل انتخاب و قابل دسترس تبدیل می کنه، پس لازم نیست از فرمول ها عکس بگیری. مجوزش Apache هست و بسته npm هم داره.
search-insights یه کتابخانه جاوااسکریپت از Algolia با مجوز MIT هست که کلیک، تبدیل و بازدید کاربرها روی نتیجه های جستجو رو به Insights API خود Algolia گزارش می ده. اگه جستجوی سایتت با Algolia کار می کنه، با این بسته می تونی رفتار کاربرها رو ثبت کنی و کیفیت جستجو رو بهتر کنی.
js-cookie یه کتابخانه جاوااسکریپت ساده و خیلی سبکه که کار با کوکی های مرورگر رو راحت می کنه. با چند تا متد کوتاه می تونی کوکی بسازی، بخونی و پاک کنی و لازم نیست با رشته خام document.cookie سروکله بزنی. مجوزش MIT هست و به کتابخانه دیگه ای وابسته نیست.
@clerk/clerk-js کتابخانه جاوااسکریپت Clerk برای سمت مرورگره. با اون می تونی ورود، ثبت نام، نشست کاربر و صفحه مدیریت حساب رو توی صفحه وب راه بندازی، به شرطی که از سرویس احراز هویت Clerk استفاده کنی. بسته های Clerk برای فریم ورک هایی مثل ری اکت هم معمولا روی همین کتابخانه تکیه دارن.
آخرین نسخه
۶.۴۱.۰
نسخه‌ها
۱۷۹
به‌روزرسانی
چیزی که لازم دارید اینجا نیست؟
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.
