در این مقاله، به شما نشان خواهیم داد که چگونه می توانیم از jQuery برای ساخت Notifications در سایت خود استفاده کنیم. همچنین یاد خواهیم گرفت که چگونه به کاربران سایت، امکان بستن دائمی Notifications با استفاده از کوکی را بدهیم.

آیا تا به حال به Notification هایی که زمان پیمایش (Scroll) صفحه به سمت پایین ظاهر می شوند و درصورت پیمایش (Scroll) به سمت بالا دوباره پنهان می شوند، توجه کرده اید؟ در این مقاله، یکی از همین Notificationها را خواهیم ساخت. و همچنین به کاربر این امکان را می دهیم که اگر این Notification برایش آزاردهنده بود، با استفاده از کوکی آن را برای همیشه ببندد.

یک فایل به نام ‘NotificationsUsingPanels.html’ می سازیم. از نظر نگارش HTMLای، تمام آنچه که ما نیاز داریم، یک نگه دارنده (Container) برای نگه داری پیام Notification ما و یک تگ span که یک دکمه 'close' در آن داریم، می باشد.

<div id="note">
    <h3>Your Message Comes Here</h3>
    <span class="close">
        
    </span>
</div>

این تگ div، باید گوشه پایین صفحه قرار گیرد تا آن چیزی که ما می خواهیم ایجاد شود. همچنین به یک دکمه 'close' در گوشه سمت راست، بالای div نیاز داریم.

کد Css زیر که در css/notificationpanel.css ذخیره شده است، نحوه استایل دهی برای رسیدن به نتیجه موردنظر ما را نشان می دهد:

#note{
    display:none;
    position:fixed;
    bottom:0;
    right:3px;
    min-height: 50px;
    height:100px;
    width:500px;
    background: #4679bd;     
    padding: 20px 60px;      
    font: 24px Georgia, serif;     
    color: #fff;     
    border-radius: 9px;
}
 
.close {
    background: transparent url('../images/close-sign.png') 0 0 no-repeat;
    position: absolute;
    top: 5px;
    right: 5px;
    width:40px;
    height:48px;
    display:block;
}

همانطور که می بینید، کارمان را با تنظیم position = fixed شروع کردیم تا div موردنظر را در پایین صفحه نگه داریم. و همچنین حالت نمایش آن را، none تنظیم کردیم. زیرا می خواهیم، div تنها زمانی نمایان شود که کاربر صفحه را به سمت پایین، پیمایش می کند. برای بارگیری دکمه close، به طور صریح برای آن عرض و ارتفاع مشخص کرده ایم و حالت نمایش آن را روی block تنظیم کرده ایم.

شکل زیر، خروجی ما تا این مرحله است:

برای نمایش و عدم نمایش Notification، زمان پیمایش صفحه توسط کاربر از jQuery استفاده می کنیم. رویداد (event) به نام ()scroll داریم که زمانی به کار می رود که موقعیت (position) المنت مربوط به scroll تغییر می کند که در اینجا، المنت ما پنجره مرورگر می باشد.

$(window).scroll(function () {
...
});

کد بالا، یک shortcut برای (window)$ روی (()scroll",function") می باشد. کل کد را در ادامه مشاهده می کنید.

$(function () {
    var $window = $(window),
        $body = $('body'),
        $note = $("#note");
 
    $window.scroll(function () {
        if ($window.scrollTop() > $body.height() / 2) {
            $note.fadeIn();
        }
        else {
            $note.fadeOut();
        }
    });
});

()scrollTop موقعیت فعلی پیمایشگر (scroll bar) عمودی را می گیرد و آن را با ارتفاع پیمایشگر مقایسه می کند تا مشخص کند، در کدام نیمه از صفحه هستیم. اگر پایین صفحه باشیم، با استفاده از ()FadeIn، پیام Notification را نمایش می دهیم. زمانی که کاربر به سمت بالای صفحه پیمایش کند، به همین ترتیب، مشخص می کنیم که اگر در نیمه بالای صفحه باشیم، با استفاده از ()FadeOut آن را پنهان می کنیم.

برای بستن Notification از کد زیر استفاده می کنیم:

$('.close').on('click', function () {
    $note.fadeOut("slow");
    $window.off('scroll');
});

برای رویداد کلیک (onClick event) مربوط به span، برای پنهان کردن پنل Notification از ()FadeOut و برای حذف کردن scroll event listener مربوط به شیء window از ()off استفاده می کنیم.

  استفاده از کوکی برای بستن همیشگی Notification:

همانطور که متوجه شدید، این راه حل کافی نیست. زمانی که شما دکمه close را می زنید، تنها تا زمانی که کاربر دوباره صفحه را لود نکرده باشد، Notification بسته می شود.

برای اینکه به طور دائمی، Notification را غیرفعال کنیم به کوکی ها نیاز داریم. وجود کوکی ها نیاز است زیرا که Http بدون حالت (stateless) است. به این معنی که Http هیچ راهی برای نگه داری تنظیمات دلخواه کاربر در هر بار Reload شدن صفحه ندارد و این همان جایی است که کوکی مفید است و تنظیمات دلخواه کاربر را ذخیره می کند. بنابراین، کد خود را برای ذخیره این تنظیمات دلخواه کاربر تغییر می دهیم.

فایلی به نام ‘NotificationsUsingCookies.html’ می سازیم. از کد زیر استفاده می کنیم.

var $window = $(window),
    $body = $('body'),
    $note = $("#note"),
    notifyCookie = document.cookie;
 
$window.scroll(function () {
    if (($window.scrollTop() > $body.height() / 2) &&
            (notifyCookie.search('hideNote') === -1))
    {
        $note.fadeIn();
    }
    else
    {
        $note.fadeOut();
    }
});
 
 
$('.close').on('click', function () {
    $note.fadeOut("slow");
    $window.off('scroll');
    document.cookie = 'hideNote=true; expires=' +
                        (new Date(Date.now() + (10000 * 1)).toUTCString());
});

این کد با کمی تغییر، مشابه کد قبلی می باشد. تنها با این تفاوت که کوکی را برای ذخیره تنظیمات دلخواه کاربر و خواندن آن به هنگام نمایش Notification، تنظیم کردیم.

برای تست، کوکی به مدت 10 ثانیه تنظیم شده است. البته شما می توانید آن را به مدت زمان یک ساعت، یک روز و یا حتی یک سال تغییر دهید.

این یک مثال کاملا ساده از استفاده کوکی می باشد. اگر به دنبال یک مثال کامل از خواندن/نوشتن کوکی با پشتیبانی کامل unicode هستید، مستندات Mozilla را بررسی کنید. همچنین توجه داشته باشید که اگر کاربر، کوکی خود را حذف کند یا مرورگر کاربر کوکی را پشتیبانی نکند، این کد کار نخواهد کرد.

استفاده از cookie plugin:

فایل جدیدی به نام ‘NotificationsUsingCookiesPlugin.html’ می سازیم. refrence زیر را به صفحه اضافه می کنیم.

<script src="../scripts/jquery.cookie.js"></script>

حال کد خود را برای استفاده از jQuery Cookie Plugin تغییر می دهیم. کد قبلی به جز قسمت هایی که مشخص شده است، تقریبا به همان صورت باقی می ماند.

var $window = $(window),
    $body = $('body'),
    $note = $("#note");   
 
$window.scroll(function () {
    if (($window.scrollTop() > $body.height() / 2) &&
                (typeof $.cookie('hideNote') === "undefined"))
    {
        $note.fadeIn();
    }
    else
    {
        $note.fadeOut();
    }
});
 
 
$('.close').on('click', function () {
    $note.fadeOut("slow");
    $window.off('scroll');
    var date = new Date(Date.now() + (30000));
    $.cookie('hideNote', 1, { expires: date });
});

برای اینکه آن را به یک session cookie تبدیل کنید، گزینه expires را حذف نمایید. با این کار، با بسته شدن مرورگر، کوکی حذف خواهد شد.

اگر مرورگر شما، از HTML5 پشتیبانی می کند، می توانید کوکی را غیرفعال کنید و به جای آن از HTML5 local storage (ذخیره محلی HTML5) برای ذخیره تنظیمات دلخواه کاربر استفاده کنید.