کادر هشدار

کادر هشدار

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

برای مشاهده لینک وارد شود

در این پلاگین ،موضوع هشدار،کادر آن وآیکون مورد نیاز تماماً توسط یک تگ <P> ایجاد میشوند و با تعدادی کدCSS تغیراتی اعمال می کنیم.

i12(1)

کدهای CSS

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

styles.css – Part 1

 

/* The bouncing box */

#box{
    background:url('img/box_bg.jpg') repeat-x center top #fcfcfc;
    height:115px;
    padding:20px;
    margin-top:-10px;
    padding-top:30px;
    width:400px;
    border:1px solid #fcfcfc;
    color:#494848;
    text-shadow:1px 1px 0 white;
    font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
}

#box p{
    font-size:25px;
    background:url('img/warning.png') no-repeat 10px center;
    padding-left:90px;
}

#box p b{
    font-size:52px;
    display:block;
}

#box,
#main,
a.button{
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

ما در اینجا برای حرکت کادر هشدار کدهایی را نوشتیم همچنین موقعیت کادر را ثابت و در وسط صفحه قرار دادیم که برای ایجاد انیمیشن مورد نیاز است..

styles.css – Part 2

/* Styling the big button */

a.button{
    color:white;
    letter-spacing:-2px;
    padding:20px;
    display:block;
    text-shadow:1px 1px 0 #145982;
    font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
    font-size:80px;
    font-weight:bold;
    text-align:center;
    width:350px;
    border:1px solid #60b4e5;

    margin:60px auto;

    /*
        CSS3 gradients for webkit and mozilla browsers,
        fallback color for the rest:
    */

    background-color: #59aada;
    background-image: -moz-linear-gradient(#5eb2e2, #4f9cca);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5eb2e2), to(#4f9cca));
}

a.button:hover{
    /* Lighter gradients for the hover effect */
    text-decoration:none;
    background-color: #5eb2e2;
    background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bbbe9), to(#57a5d4));
}

در بخش دوم کد ما تعدادی کد CSS به دکمه واقع در صفحه اعمال می کنیم. که به دلیل سادگی نیاز به توضیح ندارند.

کدهای JQUERY

در ابتدا ما پلاگین نوار هشدار را ایجاد می کنیم.

bouncebox-plugin/jquery.bouncebox.1.0.js

(function($){

    /* The plugin extends the jQuery Core with four methods */

    /* Converting an element into a bounce box: */
    $.fn.bounceBox = function(){

        /*
            Applying some CSS rules that center the
            element in the middle of the page and
            move it above the view area of the browser.
        */

        this.css({
            top		: -this.outerHeight(),
            marginLeft	: -this.outerWidth()/2,
            position	: 'fixed',
            left		: '۵۰%'
        });

        return this;
    }

    /* The boxShow method */
    $.fn.bounceBoxShow = function(){

        /* Starting a downward animation */

        this.stop().animate({top:0},{easing:'easeOutBounce'});
        this.data('bounceShown',true);
        return this;
    }

    /* The boxHide method */
    $.fn.bounceBoxHide = function(){

        /* Starting an upward animation */

        this.stop().animate({top:-this.outerHeight()});
        this.data('bounceShown',false);
        return this;
    }

    /* And the boxToggle method */
    $.fn.bounceBoxToggle = function(){

        /*
            Show or hide the bounceBox depending
            on the 'bounceShown' data variable
        */

        if(this.data('bounceShown'))
            this.bounceBoxHide();
        else
            this.bounceBoxShow();

        return this;
    }

})(jQuery);

ما چهار متد مجزا برای تبدیل تگ div به کادر نوار هشدار استفاده کردیم و ما کادر را توسط متد جی کوئری ()animate غیر فعال کردیم(hide) تا در صورت نیاز آن را نمایش بدهیم.

تمامی این متد ها برای شما پس از وارد کردن کتابخانه جی کوئری و فایل  jquery.bounce.1.0.js  به صفحه مورد نظر قابل استفاده خواهد بود.

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

script.js

$(document).ready(function(){

    /* Converting the #box div into a bounceBox: */
    $('#box').bounceBox();

    /* Listening for the click event and toggling the box: */
    $('a.button').click(function(e){

        $('#box').bounceBoxToggle();
        e.preventDefault();
    });

    /* When the box is clicked, hide it: */
    $('#box').click(function(){
        $('#box').bounceBoxHide();
    });
});

اولین کاری که ما انجام میدهیم تبدیل تگ div به کادر پیام است.

شما میتونید تمام کد های HTML را داخل تگ box# قرار دهید  و کد آنها را به راحتی داخل کادر هشدار قرار می دهد.

پایان

+7
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

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

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


7 + دو =