ورود / ثبت نام
0
0

ایجاد پنجره های Notification شبیه به فیسبوک با استفاده از جی کوئری و CSS

295 بازدید
Notification شبیه به فیسبوک

Notification شبیه به فیسبوک

ساخت Notification شبیه به فیسبوک همان طور که می دانیم فیسبوک یکی از سایت های محبوب برای اشتراک داده هایی مانند عکس ها و… با خانواده و دوستان می باشد. البته، شما می توانید کارهایی بسیار فراتر از اشتراک تصاویر در فیسبوک انجام دهید. اگرچه، فیسبوک برای طراحان سایت الهام بخش است و مکانی برای یافتن ایده ها و تکنیک های نو است. در اینجا، به شما نشان می دهیم که چگونه با استفاده از جی کوئری و CSS پنجره های notification ای شبیه به فیسبوک ایجاد کنید.

Notification شبیه به فیسبوک

ما در اینجا تغییراتی در این مثال دادیم و از هیچ تصویری استفاده نکردیم. اگرچه، چند انیمیشن با استفاده از متد جی کوئری .animate() ایجاد کردیم و از امکانات CSS برای طراحی کادرهای notification و منوی راهبری بالا استفاده کردیم.

این مقاله فقط یک مثال ساده است و ایده پشت آن برای یادگیری چند انیمیشن و استایل ساده با استفاده از متدهای جی کوئری و ویژگی های CSS است.

ابتدا، در تگ <head> کتابخانه Google CDN را برای جی کوئری اضافه می کنیم.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

حال اجازه دهید مثال را جلو برده و اولین استایل را ایجد کنیم.

تگ style زیر را در تگ <head> اضافه می کنیم. این استایل یک طراحی ساده از منو، یک شمارنده برای نمایش تعداد notification ها و پنجره notification می باشد. پنجره ای با شناسه #notifications نیز به صورت پنهان باقی می ماند.

<style>
    ul {
        display:block;
        background:#45619D;
        list-style:none;
        margin:0;
        padding:12px 10px;
        height:21px;
    }
    ul li {
        float:left;
        font:13px helvetica;
        font-weight:bold;
        margin:3px 0;
    }
    ul li a {
        color:#FFF;
        text-decoration:none;
        padding:6px 15px;
        cursor:pointer;
    }
    ul li a:hover {
        background:#425B90;
        text-decoration:none;
        cursor:pointer;
    }
        
    #noti_Container {
        position:relative;
    }
       
    /* A CIRCLE LIKE BUTTON IN THE TOP MENU. */
    #noti_Button {
        width:22px;
        height:22px;
        line-height:22px;
        border-radius:50%;
        -moz-border-radius:50%; 
        -webkit-border-radius:50%;
        background:#FFF;
        margin:-3px 10px 0 10px;
        cursor:pointer;
    }
        
    /* THE POPULAR RED NOTIFICATIONS COUNTER. */
    #noti_Counter {
        display:block;
        position:absolute;
        background:#E1141E;
        color:#FFF;
        font-size:12px;
        font-weight:normal;
        padding:1px 3px;
        margin:-8px 0 0 25px;
        border-radius:2px;
        -moz-border-radius:2px; 
        -webkit-border-radius:2px;
        z-index:1;
    }
        
    /* THE NOTIFICAIONS WINDOW. THIS REMAINS HIDDEN WHEN THE PAGE LOADS. */
    #notifications {
        display:none;
        width:430px;
        position:absolute;
        top:30px;
        left:0;
        background:#FFF;
        border:solid 1px rgba(100, 100, 100, .20);
        -webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
        z-index: 0;
    }
    /* AN ARROW LIKE STRUCTURE JUST OVER THE NOTIFICATIONS WINDOW */
    #notifications:before {         
        content: '';
        display:block;
        width:0;
        height:0;
        color:transparent;
        border:10px solid #CCC;
        border-color:transparent transparent #FFF;
        margin-top:-20px;
        margin-left:10px;
    }
        
    h3 {
        display:block;
        color:#333; 
        background:#FFF;
        font-weight:bold;
        font-size:13px;    
        padding:8px;
        margin:0;
        border-bottom:solid 1px rgba(100, 100, 100, .30);
    }
        
    .seeAll {
        background:#F6F7F8;
        padding:8px;
        font-size:12px;
        font-weight:bold;
        border-top:solid 1px rgba(100, 100, 100, .30);
        text-align:center;
    }
    .seeAll a {
        color:#3b5998;
    }
    .seeAll a:hover {
        background:#F6F7F8;
        color:#3b5998;
        text-decoration:underline;
    }
</style>

Markup:

یک منو ایجاد می کنیم که در بالای صفحه باقی می ماند. برای پنجره notification، یک تگ <div> با شناسه notifications اضافه می کنیم. زمانی که صفحه بارگزاری می شود این قسمت پنهان باقی می ماند. استایل مربوط به این عنصر را می توانید در کدهای بالا مشاهده نمایید. این بخش با شناسه noti_Container در تگ <li> قرار می گیرد که به عنوان parent container می باشد.

<body style="margin:0;padding:0;">
    <div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Find Friends</a></li>
            <li id="noti_Container">
                <div id="noti_Counter"></div>   <!--SHOW NOTIFICATIONS COUNT.-->
                
                <!--A CIRCLE LIKE BUTTON TO DISPLAY NOTIFICATION DROPDOWN.-->
                <div id="noti_Button"></div>    

                <!--THE NOTIFICAIONS DROPDOWN BOX.-->
                <div id="notifications">
                    <h3>Notifications</h3>
                    <div style="height:300px;"></div>
                    <div class="seeAll"><a href="#">See All</a></div>
                </div>
            </li>
            <li><a href="#">Messages</a></li>
        </ul>
    </div>
</body>

داخل آیتم <li id=”noti_Counter”> دو عنصر div دیگر اضافه کردیم، یکی برای نمایش شمارنده (شمارنده قرمز بالای صفحه) برای تعداد notificationها و دیگری به عنوان یک button کار می کند، اما به شکل دایره می باشد. زمانی که روی button کلیک می کنید، پنجره notification را به صورت یک popup نمایش می دهد.

عنصر شمارنده قرمز رنگ (id = “noti_Counter”) اعداد را به صورت داینامیک از قسمت اسکریپت این مثال دریافت می کند. این اعداد را می توانیم با دریافت داده ها از یک منبع داده از راه دور مانند SQL Server یا Xml با استفاده از Ajax تخصیص دهیم. البته در اینجا ما از حالت استاتیک آن استفاده کردیم.

اسکریپت جی کوئری

زمانی که صفحه بارگزاری می شود، المنت noti_Counter با یک عدد ثابت (۷) مقداردهی می شود و به صورت انیمیشنی به سمت پایین اسکرول می خورد و آیکون notifications (آیکون دایره ای) در منوبار باقی می ماند.

<script>
    $(document).ready(function () {

        // ANIMATEDLY DISPLAY THE NOTIFICATION COUNTER.
        $('#noti_Counter')
            .css({ opacity: 0 })
            .text('7')              // ADD DYNAMIC VALUE (YOU CAN EXTRACT DATA FROM DATABASE OR XML).
            .css({ top: '-10px' })
            .animate({ top: '-2px', opacity: 1 }, 500);

        $('#noti_Button').click(function () {

            // TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
            $('#notifications').fadeToggle('fast', 'linear', function () {
                if ($('#notifications').is(':hidden')) {
                    $('#noti_Button').css('background-color', '#2E467C');
                }
                else $('#noti_Button').css('background-color', '#FFF');        // CHANGE BACKGROUND COLOR OF THE BUTTON.
            });

            $('#noti_Counter').fadeOut('slow');                 // HIDE THE COUNTER.

            return false;
        });

        // HIDE NOTIFICATIONS WHEN CLICKED ANYWHERE ON THE PAGE.
        $(document).click(function () {
            $('#notifications').hide();

            // CHECK IF NOTIFICATION COUNTER IS HIDDEN.
            if ($('#noti_Counter').is(':hidden')) {
                // CHANGE BACKGROUND COLOR OF THE BUTTON.
                $('#noti_Button').css('background-color', '#2E467C');
            }
        });

        $('#notifications').click(function () {
            return false;       // DO NOTHING WHEN CONTAINER IS CLICKED.
        });
    });
</script>

 

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=17896
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
فاطمه زکایی
فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.
مطالب بیشتر
برچسب ها:

نظرات

2 نظر در مورد ایجاد پنجره های Notification شبیه به فیسبوک با استفاده از جی کوئری و CSS

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *