نمایش حامیان وبسایت

نمایش حامیان وبسایت

ما در این آموزش قصد داریم تا با استفاده از PHP و CSS و Jquery یک پلاگین برای نمایش حامیان وبسایت ایجاد کنیم  که  با کلیک بر روی هر کدام از آنها  با چرخش خود، نام وبسایت و توضیحاتی در مورد حامی مالی برایمان نمایش دهد.

دریافت فایل پیش نمایش

بسیاری از نشانه گذاری ها توسط PHP بعد از اجرای حلقه اصلی در آرایه  sponsor$ مقدار دهی اولیه می شوند.شما در زیر کد مربوط به مقدار دهی اولیه و خروجی  برای گوگل را مشاهده می کنید.

demo.php

بیرونی ترین تگ sponsor شامل دوتا تگ مجزا است.اولی sponsorFlip  که شامل لوگوی حامی وبسایت است.هر کلیک روی آن باعث اجرای دستور العمل Flip(چرخش) میشود که کدهای آن را در بخش کدهای جی کوئری مشاهده خواهید کرد.

توضیحات اضافی در داخل تگ sponsorData قرار دارد.البته خاصیت display آن غیر فعال است.

i12

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

styles.css – Part 1

body{
    /* Setting default text color, background and a font stack */
    font-size:0.825em;
    color:#666;
    background-color:#fff;
    font-family:Arial, Helvetica, sans-serif;
}

.sponsorListHolder{
    margin-bottom:30px;
}

.sponsor{
    width:180px;
    height:180px;
    float:left;
    margin:4px;

    /* Giving the sponsor div a relative positioning: */
    position:relative;
    cursor:pointer;
}

.sponsorFlip{
    /*  The sponsor div will be positioned absolutely with respect
        to its parent .sponsor div and fill it in entirely */

    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border:1px solid #ddd;
    background:url("img/background.jpg") no-repeat center center #f9f9f9;
}

.sponsorFlip:hover{
    border:1px solid #999;

    /* CSS3 inset shadow: */
    -moz-box-shadow:0 0 30px #999 inset;
    -webkit-box-shadow:0 0 30px #999 inset;
    box-shadow:0 0 30px #999 inset;
}

بعد از استایل های تگ های Sponsor و sponsorFlip ما  hover: را اضافه می کنیم.سپس با استفاده از خاصیت  box-shadow  به صفحه حامیان شکلی جذاب می بخشیم.البته این را در نظر داشته باشین که این خاصیت در مرورگرهای جدید پشتیبانی میشوند.

styles.css – Part 2

.sponsorFlip img{
    /* Centering the logo image in the middle of the .sponsorFlip div */

    position:absolute;
    top:50%;
    left:50%;
    margin:-70px 0 0 -70px;
}

.sponsorData{
    /* Hiding the .sponsorData div */
    display:none;
}

.sponsorDescription{
    font-size:11px;
    padding:50px 10px 20px 20px;
    font-style:italic;
}

.sponsorURL{
    font-size:10px;
    font-weight:bold;
    padding-left:20px;
}

.clear{
    /* This class clears the floats */
    clear:both;
}

همانطور که قبلا گفته شد تگ sponsorData توسط خاصیت display:none غیر فعال شده است و نمایش داده نمیشود و هدف از انجام این کار این است که اطلاعات تنها در آخر و پس از اجرای انیمیشن نمایش داده شود.

i12

شما میتونید هر اطلاعاتی را که خواستید در مورد حامیان وبسایتتان در دیتابیس خود ذخیره کنید.به هر حال اطلاعات حامیان مالی اغلب ثابت هستند و تغییر چندانی نمی کنند.

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

demo.php – Part 1

// Each sponsor is an element of the $sponsors array:

$sponsors = array(
    array('facebook','The biggest social..','http://www.facebook.com/'),
    array('adobe','The leading software de..','http://www.adobe.com/'),
    array('microsoft','One of the top software c..','http://www.microsoft.com/'),
    array('sony','A global multibillion electronics..','http://www.sony.com/'),
    array('dell','One of the biggest computer develo..','http://www.dell.com/'),
    array('ebay','The biggest online auction and..','http://www.ebay.com/'),
    array('digg','One of the most popular web 2.0..','http://www.digg.com/'),
    array('google','The company that redefined w..','http://www.google.com/'),
    array('ea','The biggest computer game manufacturer.','http://www.ea.com/'),
    array('mysql','The most popular open source dat..','http://www.mysql.com/'),
    array('hp','One of the biggest computer manufacturers.','http://www.hp.com/'),
    array('yahoo','The most popular network of so..','http://www.yahoo.com/'),
    array('cisco','The biggest networking and co..','http://www.cisco.com/'),
    array('vimeo','A popular video-centric social n..','http://www.vimeo.com/'),
    array('canon','Imaging and optical technology ma..','http://www.canon.com/')
);

// Randomizing the order of sponsors:

shuffle($sponsors);

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

پس از تعریف آرایه ها ما با استفاده از تابع ()shuffle به سازماندهی و ترتیب نمایش حامیان مالی میپردازیم.

demo.php – Part 2

// Looping through the array:

foreach($sponsors as $company)
{
    echo'

';
}

پلاگین چرخش جی کوئری به کتابخانه جی کوئری و  jQuery UI نیاز دازد.بنابراین پس از وارد کردن آنها به صفحه ما به سراغ نوشتن کدهای آنها می رویم.

script.js

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    $('.sponsorFlip').bind("click",function(){

        // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

        var elem = $(this);

        // data('flipped') is a flag we set when we flip the element:

        if(elem.data('flipped'))
        {
            // If the element has already been flipped, use the revertFlip method
            // defined by the plug-in to revert to the default state automatically:

            elem.revertFlip();

            // Unsetting the flag:
            elem.data('flipped',false)
        }
        else
        {
            // Using the flip method defined by the plugin:

            elem.flip({
                direction:'lr',
                speed: 350,
                onBefore: function(){
                    // Insert the contents of the .sponsorData div (hidden
                    // from view with display:none) into the clicked
                    // .sponsorFlip div before the flipping animation starts:

                    elem.html(elem.siblings('.sponsorData').html());
                }
            });

            // Setting the flag:
            elem.data('flipped',true);
        }
    });

});

ابتدا ما یک تابع برای گوش دادن به کلیک ها در تگ .sponsorFlip به تابع اصلی متصل میکنیم.پس از کلیک شدن ما چک میکنیم که آیا پرچم flip(چرخش) توسط متد جی کوئری ()data تنظیم شده است یا نه.بقیه کدها به دلیل سادگی نیاز به توضیح ندارند.

+4
-2


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

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

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

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

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

*


شش − 1 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>