امروزه میتوانیم پیام های نوتیفیکیشن Dropdown ساده ایجاد کنیم که مانند alert box های پیشفرض جاوا اسکریپت عمل میکنند اما تجربه کاربری را به هم نمیزنند. این دقیقا همان کاری است که میتوان با overhang.js انجام داد.

پیشنهاد شگفت انگیز کدفرند،دسترسی به تمامی دوره های آموزشی کدفرند تنها با ۹۹ هزار تومان

این افزونه رایگان جی کوئری میتواند نوتیفیکیشن هایی سفارشی که از بالای صفحه Dropdown میشوند، اضافه کند. پوزیشن این نوتیفیکیشن ها، بوسیله CSS تنظیم میشود و انیمیشن آنها بوسیله جاوا اسکریپت کنترل میشود. بنابراین میتوانند بدون در نظر گرفتن طول صفحه، از یک نقطه ثابت در بالای اسکرین drop شوند.

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

مسیج ها میتوانند پاسخ هایی از جمله موفقیت، پیام خطا و نوتیفیکیشن های ساده شامل اطلاعاتی درباره کاربر یا صفحه باشند. این نوتیفیکشن ها همچنین میتوانند دکمه های yes no خودشان را برای پرسش سوالاتی مانند prompt alert جاوا اسکریپت داشته باشند.

در افزونه Overhang.js حتی گزینه ای موجود است برای نمایش نوتیفیکیشن Dropdown شامل فیلد input که میتواند برای دریافت ایمیل از کاربر بسیار مناسب باشد.

Overhang.js در تمام مرورگرهایی که جی کوئری را پشتیبانی میکنند، پشتیبانی میشود و برای ویژگی های انیمیشنی که دارد، از jQuery UI استفاده شده است.

علاوه بر کتابخانه های jQeury و jQuery UI  باید یک فایل سفارشی CSS هم در پروژه خود Include کنید. البته میتوانید برای کاهش درخواست های http وبسایت خود، این فایل CSS را با stylesheet خود ترکیب کنید.

هربار که متد overhang() را فراخوانی میکنید، میتوانید به هر تعداد پارامتر به آن پاس دهید. این پارامترها در حقیقت آپشن هایی هستند که به شما کنترل کامل هر یک از نوتیفیکیشن باکس ها را میدهد.

میتوانید ویژگی هایی مانند سرعت انیمیشن، تاخیر، easing و سایز و رنگ باکس و سایر ویژگی های طراحی را تنظیم کنید. قطعه کد زیر نحوه ساخت باکس confirmation را نمایش میدهد.

// Some confirmation
$("body").overhang({
   type: "confirm",
   yesMessage: "Yes please!",
   noMessage: "No thanks."
});

همانطور که مشاهده میکنید، روند کار بسیار ساده است و نیازی به نوشتن کد جی کوئری زیاد نیست. 

برای دانلود این افزونه نوتیفیکیشن Dropdown میتوانید از ریپوزیتوری Github بازدید کنید. همچنین میتوانید فایلها و سورس کدهای پروژه را بصورت مستقیم بررسی کنید. برای مشاهده نمونه های بیشتر از نوتیفیکیشن های Dropdown سفارشی، از وبسایت Overhang.js بازدید کنید.

پیشنهاد شگفت انگیز کدفرند،دسترسی به تمامی دوره های آموزشی کدفرند تنها با ۹۹ هزار تومان