В сегодняшнем уроке мы создадим очень интересную временную линейку с помощью PHP, MySQL, CSS и jQuery.
Она будет отображать список определенных событий, разбитых по датам с возможностью просматривать детали этого события.
Добавление новых событий будет происходит простым добавлением ряда в базу данных.
Шаг 1 - XHTML
Для начала создаем необходимую структуру.
demo.php
<div id="timelineLimiter"> <!-- Прячет слой timelineScroll -->
<div id="timelineScroll"> <!-- Содержит временную шкалу -->
<!-- PHP код, который генерирует список событий -->
<div class="clear"></div>
</div>
<div id="scroll"> <!-- Линейка годов -->
<div id="centered"> <!-- Подстраивается с помощью jQuery, чтобы все года влезли -->
<div id="highlight"></div> <!-- Светло голубое выделение-->
<?php echo $scrollPoints ?> <!-- Эта PHP переменная содержит года с событиями -->
<div class="clear"></div>
</div>
</div>
<div id="slider"> <!-- Контейнер для слайдера -->
<div id="bar"> <!-- Бегунок -->
<div id="barLeft"></div> <!-- Левая стрелка -->
<div id="barRight"></div> <!-- Правая стрелка -->
</div>
</div>
</div>
PHP код пропущен для того, чтобы ознакомится с разметкой. Далее мы его вернем обратно.
Главная идея заключается в том, что у нас два слоя - timelineLimiter и timelineScroll внутри первого. Первый занимает ширину экрана, а второй расширяется таким образом, чтобы поместить все события. Таким образом более объемный внутренний слой всегда на виду с возможностью скрола влево и вправо.
Теперь давайте взглянем на костяк PHP.
Шаг 2 - PHP
PHP выбирает все события в базе данных и группирует их согласно году в массив $dates. После этого скрипт вырывает все события и вставляет их в элемент <li> в неупорядоченный список (по годам).
demo.php
// Прежде всего выбираем все события из БД, упорядоченные по дате:
$dates = array();
$res = mysql_query("SELECT * FROM timeline ORDER BY date_event ASC");
while($row=mysql_fetch_assoc($res))
{
// Сохраняем события в массив, группируя по годам:
$dates[date('Y',strtotime($row['date_event']))][] = $row;
}
$colors = array('green','blue','chreme');
$scrollPoints = '';
$i=0;
foreach($dates as $year=>$array)
{
// Пробегаем по годам:
echo '
<div class="event">
<div class="eventHeading '.$colors[$i++%3].'">'.$year.'</div>
<ul class="eventList">';
foreach($array as $event)
{
// Пробегаем по событиям в текущем году:
echo '<li class="'.$event['type'].'">
<span class="icon" title="'.ucfirst($event['type']).'"></span>
'.htmlspecialchars($event['title']).'
<div class="content">
<div class="body">'.($event['type']=='image'?'<div style="text-align:center"><img src="'.$event['body'].'" alt="Image" /></div>':nl2br($event['body'])).'</div>
<div class="title">'.htmlspecialchars($event['title']).'</div>
<div class="date">'.date("F j, Y",strtotime($event['date_event'])).'</div>
</div>
</li>';
}
echo '</ul></div>';
// Генерируем список годов для полосы прокрутки:
$scrollPoints.='<div class="scrollPoints">'.$year.'</div>';
}
Поскольку разметка полностью готова - можно переходить к оформлению.
Шаг 3 - CSS
styles.css
.event{
/* Название секции и список событий */
float:left;
padding:4px;
text-align:left;
width:300px;
margin:0 5px 50px;
}
.eventList li{
/* События */
background:#F4F4F4;
border:1px solid #EEEEEE;
list-style:none;
margin:5px;
padding:4px 7px;
/* CSS3 закругленные углы */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
.eventList li:hover{
cursor:pointer;
background:#E6F8FF;
border:1px solid #D4E6EE;
color:#548DA5;
}
li span{
/* Иконка события */
display:block;
float:left;
height:16px;
margin-right:5px;
width:16px;
}
/* Индивидуальные фоновые изображения для каждого типа событий: */
li.news span.icon { background:url(img/icons/newspaper.png) no-repeat; }
li.image span.icon { background:url(img/icons/camera.png) no-repeat; }
li.milestone span.icon { background:url(img/icons/chart.png) no-repeat; }
#timelineLimiter{
width:100%;
overflow:hidden;
padding-top:10px;
margin:40px 0;
}
#scroll{
/* Маленькая шкала под основной. Здесь спрятана, но показывается с помощью jQuery при включенном JS: */
display:none;
height:30px;
background:#F5F5F5;
border:1px solid #EEEEEE;
color:#999999;
}
.scrollPoints{
/* Года */
float:left;
font-size:1.4em;
padding:4px 10px;
text-align:center;
width:100px;
position:relative;
z-index:10;
}
Шаг 4 - jQuery
Последний шаг - это вставить слой интерактивности в браузер. Будем это делать с помощью jQuery.
Код разделен на две части для читабельности. Комментарии в коде:
script.js - часть 1
$(document).ready(function(){
/* Код выполняется после загрузки страницы */
/* Количество секции с событиями / годов с событиями */
var tot=$('.event').length;
$('.eventList li').click(function(e){
showWindow('<div>'+$(this).find('div.content').html()+'</div>');
});
/* Каждая секция событий шириной 320 px */
var timelineWidth = 320*tot;
var screenWidth = $(document).width();
$('#timelineScroll').width(timelineWidth);
/* Если шкала шире экрана - показать слайдер: */
if(timelineWidth > screenWidth)
{
$('#scroll,#slider').show();
$('#centered,#slider').width(120*tot);
/* Making the scrollbar draggable: */
$('#bar').width((120/320)*screenWidth).draggable({
containment: 'parent',
drag: function(e, ui) {
if(!this.elem)
{
/* Эта функция исполняется только 1 раз в целях ускорения работы */
this.elem = $('#timelineScroll');
/* Разница между шириной слайдера и его контейнером: */
this.maxSlide = ui.helper.parent().width()-ui.helper.width();
/* Разница между шириной шкалы и ее контейнером */
this.cWidth = this.elem.width()-this.elem.parent().width();
this.highlight = $('#highlight');
}
this.elem.css({marginLeft:'-'+((ui.position.left/this.maxSlide)*this.cWidth)+'px'});
this.highlight.css('left',ui.position.left)
}
});
$('#highlight').width((120/320)*screenWidth-3);
}
});
Вы могли заметить в секции про PHP, что каждое событие содержит несколько дополнительных информационных полей (название, текст и дата). Они спрятаны к показу с помощью CSS display:none. К ним мы обращаемся с помощью jQuery, чтобы отобразить всю эту информацию в сплывающем окне с деталями события.
script.js - часть 2
function showWindow(data)
{
/* Каждое событие содержит несколько дополнительных
слоев с информацией про событие: */
var title = $('.title',data).text();
var date = $('.date',data).text();
var body = $('.body',data).html();
$('<div id="overlay">').css({
width:$(document).width(),
height:$(document).height(),
opacity:0.6
}).appendTo('body').click(function(){
$(this).remove();
$('#windowBox').remove();
});
$('body').append('<div id="windowBox"><div id="titleDiv">'+title+'</div>'+body+'<div id="date">'+date+'</div></div>');
$('#windowBox').css({
width:500,
height:350,
left: ($(window).width() - 500)/2,
top: ($(window).height() - 350)/2
});
}
Заключение
Сегодня мы создали временную шкалу, которые Вы можете использовать для показа важных событий в Вашей жизни (или, например становление компании, сайта, фирмы, команды...).