Временная шкала (PHP, CSS и jQuery )
Сегодня мы будем создавать прелестную временную шкалу для событий, которая будет похожа на временную шкалу Google, созданную на десятилетие компании (смотреть здесь -> http://www.google.com/tenthbirthday/).
Временная шкала будет использовать PHP, MySQL, CSS и jQuery, которые помогут придать ей замечательный вид и сделать разворачивание дополнительной информации о событии по нажатию кнопки мыши. Добавление нового события сводится к простой вставке новой строки в таблицу базы данных.
Шаг 1 – XHTML
Создаем структуру XHTML в файле demo.php.
demo.php
<div id="timelineLimiter"> <!-- Скрывает выступающие div 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> <!-- Правая стрелка на полоске, обе стилизованы с помощью CSS -->
</div>
</div>
</div>
Пока в коде опущены строки кода PHP, которые генерируют события, чтобы можно было лучше рассмотреть разметку (PHP код будет вставлен на следующих этапах).
Основная идея заключается в том, что мы имеем два div – timelineLimiter и timelineScroll, который расположен внутри предыдущего div. Формирователь берет ширину экрана и затем увеличивает полученное значение, чтобы вместились все секции событий, которые вставлены внутри него. Таким образом только часть большого внутреннего div будет видимой, а остальная часть будет прокручиваться влево и вправо с помощью слайдера jQuery, который будет готов на шаге 4.
Теперь посмотрим на код 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))
{
// Cохраняем события в массиве, группируя их по годам:
$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
После вставки ссылки на файл CSS в заголовке документа, можно писать правила. Ниже приводятся только самые интересные строчки, остальной код можно посмотреть в файле styles.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{
/* Состояние 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; }
div.content{
/* Данный div содержит дополнительные данные для содержания */
display:none;
}
.eventHeading{
/* Цветные заголовки с указанием года */
font-size:2em;
margin:-5px -5px 10px;
padding:2px 5px;
text-align:center;
}
/* Три цветовых схемы для заголовков: */
.eventHeading.chreme{
background:#FBF7F0;
border:1px solid #EEE4D4;
color:#A78B5F;
}
.eventHeading.blue{
background:#E6F8FF;
border:1px solid #D4E6EE;
color:#548DA5;
}
.eventHeading.green{
background:#E6FFDF none repeat scroll 0 0;
border:1px solid #C9E6C1;
color:#6EA85F;
}
#timelineLimiter{
/* Скрываем выступающиую временную шкалу */
width:100%;
overflow:hidden;
padding-top:10px;
margin:40px 0;
}
#scroll{
/* Маленькая временная шкала под основной. скрывается здесь и будет показана с помощью jQuery, если JavaScript разрешен: */
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;
}
Класс .event задает стиль для секции года событий (элементы div, которые группируют события, происходившие в одном году).
Примерно в середине представленного кода можно найти строки, посвященные скругленным углам CSS3, которые работают в большинстве новых браузеров.
Также определяются фоновые изображения для каждого типа событий – изображений, новостей и вех.
Шаг 4 – jQuery
Последний шаг - добавляем интерактивность на страницу. Это будет производиться с помощью jQuery, включенной в секцию заголовка demo.php.
Код разбит на две части для более наглядного представления.
script.js – Часть 1
$(document).ready(function(){
/* Код выполняется после полной загрузки DOM */
/* Количество секций событий / лет с событиями */
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);
/* Делаем полоску прокрутки перетаскиваемой мышкой: */
$('#bar').width((120/320)*screenWidth).draggable({
containment: 'parent',
drag: function(e, ui) {
if(!this.elem)
{
/* Данная секция выполняется только тогда, когда функция выполняется первый раз */
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);
}
});
Каждое событие является набором элементов div, которые содержат дополнительную информацию (заголовок, текст и дату). Все они скрыты с помощью свойства display:none в нашем файле CSS, но используются jQuery, так что всплывающее окно может быть наполнено данными без отправки запроса AJAX (также такой контент является видимым для поисковых механизмов, что очень хорошо для SEO). Получается решение выигрыш-выигрыш.
Данные получаются во второй части скрипта:
script.js – Часть 2
function showWindow(data)
{
/* Каждое событие содержит набор скрытых div, которые содержаит информацию о событии: */
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
});
}
В данной функции обрабатывается параметр, переданный из Части 1, где происходит вызов функции, как обычный HTML и используются стандартные селекторы jQuery для заполнения переменных заголовков, даты и тела сообщения.
Шаг 5 – MySQL
Это последний шаг, который требуется, если вы планируете запустить демонстрацию у себя на сервере или добавить функцию к себе на сайт.
Чтобы сделать все отметки, нужно исправить таблицу MySQL временной шкалы из файла timeline.sql, который содержится в архиве с исходным кодом. Также нужно установить правильные параметры для связи с базой данных в connect.php.
Готово!
Заключение
Сегодня мы разобрали, как создать временную шкалу, которая поможет отметить важные моменту в истории. Временная шкала легко модифицируется и ее можно использовать где угодно.