<!-- 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>
PHP код пропущен для того, чтобы ознакомится с разметкой. Далее мы его вернем обратно.
Главная идея заключается в том, что у нас два слоя - timelineLimiter и timelineScroll внутри первого. Первый занимает ширину экрана, а второй расширяется таким образом, чтобы поместить все события. Таким образом более объемный внутренний слой всегда на виду с возможностью скрола влево и вправо.
[Ссылки могут видеть только зарегистрированные пользователи. ]
Теперь давайте взглянем на костяк PHP.
Шаг 2 - PHP
PHP выбирает все события в базе данных и группирует их согласно году в массив $dates. После этого скрипт вырывает все события и вставляет их в элемент <li> в неупорядоченный список (по годам).
demo.php
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;
}
Вы могли заметить в секции про PHP, что каждое событие содержит несколько дополнительных информационных полей (название, текст и дата). Они спрятаны к показу с помощью CSS display:none. К ним мы обращаемся с помощью jQuery, чтобы отобразить всю эту информацию в сплывающем окне с деталями события.
script.js - часть 2
PHP код:
function showWindow(data)
{
/* Каждое событие содержит несколько дополнительных
слоев с информацией про событие: */
var title = $('.title',data).text();
var date = $('.date',data).text();
var body = $('.body',data).html();
[Ссылки могут видеть только зарегистрированные пользователи. ]
Шаг 5 - MySQL
Информация с SQL командами содержится в файле timeline.sql в папке с исходниками. С помощью этой информации можете создать необходимую таблицу БД.
Также Вам необходимо отредактировать данные доступа к Вашей БД в файле connect.php.
Заключение
Сегодня мы создали временную шкалу, которые Вы можете использовать для показа важных событий в Вашей жизни (или, например становление компании, сайта, фирмы, команды...).