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

خیلی دورترها وقتی پدیده‌ی وب، سال‌های اولیه‌ی زندگی‌اش را می‌پیمود، توسعه‌دهندگان از دستور ()window.alert برای نمایش چنین پنجره‌های تعاملی‌ای استفاده می‌کردند. بااینکه پنجره‌های ایجادشده با ()alert کاربردی بوده و هستند ولی انعطاف لازم و ظاهر جذابی ندارند. امروزه با تعداد بسیار زیادی از انتخاب‌های جایگزین، از مُدال‌ها تا پیام‌نماهای درون که توسط توسعه‌دهندگان خلاق ساخته‌شده‌اند روبرو هستیم. در این مطلب شما را با یکی از بهترین‌های آن‌ها آشنا خواهم کرد. بسته‌ی sweetAlert که می‌توانید بدون اینکه درگیر کدهای پیچیده شوید به‌عنوان جایگزین دستور alert از آن استفاده کنید.

مجموعۀ SweetAlert چیست؟

همان‌طور که از بخش معرفی صفحه‌ی رسمی این بسته در گیت‌هاب برداشت می‌شود، SweetAlert جایگزینی برای تابع توکارِ window.alert جاوا اسکریپت است که بجای آن پنجره‌های بی‌ریخت، مُدال‌های زیبایی را جایگزین کرده است. این بسته یک مجموعه‌ی مستقل است به این معنی که برای استفاده از آن به‌غیراز یک فایل جاوا اسکریپت و یک فایل CSS درون بسته، به چیز دیگری نیاز نخواهید داشت.

این بسته با سه رایحه‌ی مختلف عرضه‌شده است. اولی همان بسته‌ی مادر است که می‌توانید از آن در پروژه‌های وب خود استفاده کنید. دومی شاخه‌ی منشعب شده از گیت‌هاب اصلی است که به‌صورت ویژه برای سازگاری با Bootstrap بازنویسی شده است. نوع سوم آن بسته‌ای است که می‌توانید از آن در پروژه‌های مبتنی بر موبایل برای سیستم‌عامل اندروید استفاده کنید.

حالا که کمی با این مجموعه‌ی ارزشمند آشنا شدید، بیایید ببینیم چگونه می‌توانیم از آن در پروژۀ خود استفاده کنیم.

شروع کار با SweetAlert

برای استفاده از  SweetAlert، مثل هر بسته‌ی جاوا اسکریپت دیگر، باید آن را دانلود و در صفحه‌ای که مایل به استفاده از آن هستید ضمیمه کنید. برای این کار دو روش مطمئن وجود دارد. روش اول دانلود مستقیم آن از صفحه‌ی رسمی اش در گیت‌هاب. روش دوم استفاده از Bower برای ضمیمه کردن آن در پروژه است. اگر از Bower استفاده می‌کنید دستور زیر همه‌ی کارهای سخت را برایتان انجام خواهد داد:

برای ضمیمه کردن فایل جاوا اسکریپت از تگ آشنای  script در بخش head استفاده کنید:

حالا وقت نمایش است! ساده‌ترین حالت، استفاده مستقیم از تابع sweetAlert به شکل زیر است:

همان‌طور که مشاهده کردید، متد ()sweetAlert سه ورودی می‌پذیرد:

• title (الزامی): متنی که عنوان پنجره را مشخص می‌کند
• message (اختیاری): متنی اختیاری که در زیر عنوان و در وسط پنجره نمایش داده می‌شود.
• type (اختیاری): کلیدواژه‌ای که نوع پیام را مشخص می‌کند. این کلیدواژه می‌تواند یکی از مقادیر success ، error ، warning ، و info باشد.

بجای ()sweetAlert می‌توانید از متد کوتاه شدۀ ()swal استفاده کنید.

ورودی‌های متد ()sweetAlert که در فوق مشاهده می‌شود، می‌توانند به‌صورت یک آبجکت جاوا اسکریپت به پارامتر اول متد نیز ارسال شوند. به‌عنوان‌مثال، دستور قبل را به شکل زیر هم می‌تواند اجرا کرد:

See the Pen SweetAlert#1 islet.ir by Soheil Samadzadeh (@sszdh) on CodePen.

گزینه‌ها

جموعه‌ی SweetAlert با گزینه‌های پیکربندی زیادی همراه است. به‌عنوان‌مثال فرض کنید که می‌خواهید متن دکمه‌ی “OK” پنجره را تغییر دهید. برای این کار از گزینه‌ی confirmButtonText استفاده می‌شود. برای تغییر متن دکمه‌ی “CANCEL” از cancelButtonTextاستفاده کنید. شاید متوجه شده باشید که در مثال‌های فوق، خبری از دکمه‌ی “CANCEL” نیست. دکمه‌ی “CANCEL” به‌صورت پیش‌فرض پنهان‌شده است (پنجره با فشردن کلید ESC کیبورد به‌راحتی بسته می‌شود)، بنابراین برای نمایش آن باید با تغییر مقدار گزینه‌ی showCancelButton به true ، آن را بازگردانید.

کد زیر تمام گزینه‌های شرح داده‌شده‌ی فوق را یکجا بکار بده است:

See the Pen SweetAlert#2 islet.ir by Soheil Samadzadeh (@sszdh) on CodePen.

اگر از رنگ دکمه‌ی “OK” خوشتان نمی‌آید می‌توانید آن را با گزینه‌ی confirmButtonColor تغییر دهید. قابلیت جالب‌توجه دیگر این است که می‌توانید پنجره‌ی خود را طوری تنظیم کنید که پس از گذشت زمان مشخصی خودبه‌خود بسته شود! این قابلیت با تنظیم یک عدد برحسب میلی‌ثانیه برای گزینه‌ی timer محقق خواهد شد.

See the Pen SweetAlert#3 islet.ir by Soheil Samadzadeh (@sszdh) on CodePen.

سخن پایانی

در این مطلب سعی کردم که شما را با مجموعه‌ی SweetAlert ، که جایگزین بسیار خوبی برای ()alert توکار جاوا اسکریپت است، آشنا کنم. این کتابخانه برای استفاده در تمامی سکوها و سازگار با تمامی دستگاه‌ها طراحی‌شده است. این بسته دارای قابلیت‌های جالب‌توجه دیگری نیز هست. مانند اجرای تابع در هنگام لمس دکمه‌ها، پنجره‌های تودرتو، روال‌های پیچیده تصدیق و تائید، گرفتن ورودی از کاربر و ده‌ها قابلیت دیگر که می‌توانید همه‌ی آن‌ها را اینجا ببینید.

انعطاف‌پذیری SweetAlert به حدی است که می‌توانید از آن در پروژه‌های تحت وب یا حتی موبایل استفاده کرده و نگران چینش، ابعاد و سازگاری آن نباشید. امیدوارم شما هم به‌اندازه‌ی من از آن لذت ببرید.

---

به‌روزرسانی – ۱۰ دی‌ماه ۱۳۹۶

نسخه SweetAlert 2.x باقابلیت‌های جدید و چند تغییر مهم و بنیادین منتشرشده است. اگر تصمیم به مهاجرت از نسخه قدیمی به نسخه جدید را دارید، قبل از هر کاری این بخش از وب‌سایت اصلی را مطالعه کنید.