Проектирование и кодирования страницы спонсоров является частью жизни разработчика.Однако, тут следует иные правила, чем для других страниц сайта. Вы должны найти способ вместить много информации и организовать её четко, так что бы упор делался на ваших спонсоров, а не на другие элементы вашего дизайна.
Мы используем PHP, CSS и JQuery с JQuery Flip плагином , чтобы сделать именно это. Полученный код можно использовать для демонстрации ваших спонсоров, клиентов или портфелем проектов.
Шаг 1 - XHTML
Большинство разметки порождается с PHP для каждого из авторов после цикла основной спонсор массива. Ниже вы можете увидеть код, который будет создан и выводится для Google:
demo.php
<div title="Click to flip" class="sponsor">
<div class="sponsorFlip">
<img alt="More about google" src="img/sponsors/google.png">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
The company that redefined web search.
</div>
<div class="sponsorURL">
<a href="http://www.google.com/">http://www.google.com/ </a>
</div>
</div>
</div>
Шаг 2 - CSS
Мы можем начать оформление стены, поскольку без нее нет особого смысла на этой странице. Код состоит из двух частей. Некоторые классы опущены для ясности. Вы можете увидеть все стили, используемые в демо в styles.css в скачанном архиве.
styles.css - Часть 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;
}
Теперь стили для скрытой информации:
.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;
}
Шаг 3 - PHP
У нас есть много вариантов хранения ваших данных спонсоров - в базе данных MySQL, XML-документ или даже обычный текстовый файл. Все они имеют свои преимущества, и мы использовали все из них в предыдущих уроках (за исключением хранения XML).
Мы будем использовать хранение информации в php в массиве:
demo.php - Часть 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);
Далее идет код отвечающий за вывод наших спонсоров:
demo.php - Часть 2
// Looping through the array:
foreach($sponsors as $company)
{
echo'
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/'.$company[0].'.png" alt="More about '.$company[0].'" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
'.$company[1].'
</div>
<div class="sponsorURL">
<a href="'.$company[2].'">'.$company[2].'</a>
</div>
</div>
</div>
';
}
Шаг 4 - JQuery
JQuery плагин Flip.
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);
}
});
});
Стена спонсоров готова ;)