Шкала времени

Давайте создадим прекрасную временную шкалу, похожую на такую же шкалу Google, которую создали к юбилею (10 лет). ( http://www.google.com/tenthbirthday/).

Временная шкала воспользуется  PHP, MySQL, CSS и jQuery,

они, конечно же, предадут ей замечательный вид, и поддержат её, когда она будет разворачивать дополнительную информацию о событии при нажатии кнопки мауса.

Прибавка нового события, простая вставка новой строчки в таблицу для информации. 

Действие первое.  - XHTML.

Создадим структуру XHTML. (Файл 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> <!-- Светлоголубая полоска позади надписей с годами -->
<?=$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 , который «приготовим» дальше   (четвёртом действии).

Действие второе. - PHP

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>'; 
}

Третье действие. - 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,

группирующие одно (или несколько) событие, произошедшее за один год).

Также определяется фоновое изображение, для каждого события: рисунки новости и т.д. 

Действие четвёртое. - jQuery.

Код разделён на два куска, чтобы всё было  наглядней.

script.js - первый кусок

$(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. Это решение очень удачное.

script.js  - второй кусок

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 
});
}

В этой функции обрабатываем параметр, переданный из первого куска, там вызывалась функция как обыкновенный HTML и использовались типажные селекторы  jQuery чтобы заполнить

переменные заголовков. (Можно говорить и о датах и о телах сообщений). 

Пятое действие (и последнее) - MySQL

CREATE TABLE `timeline` (
  `id` int(6) unsigned NOT NULL auto_increment,
  `type` enum('image','news','milestone') collate utf8_unicode_ci NOT NULL default 'news',
  `title` varchar(255) collate utf8_unicode_ci NOT NULL default '',
  `body` text collate utf8_unicode_ci NOT NULL,
  `date_event` date NOT NULL default '0000-00-00',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=11;

Поделиться...