[Статья] Временная линейка с помощью PHP, MySQL, CSS и jQuery.

[Novichok]

В этом уроке мы создадим очень интересную временную линейку с помощью PHP, MySQL, CSS и jQuery.

[Ссылки могут видеть только зарегистрированные пользователи. ]

Она будет отображать список определенных событий, разбитых по датам с возможностью просматривать детали этого события.

Добавление новых событий будет происходит простым добавлением ряда в базу данных.

[Ссылки могут видеть только зарегистрированные пользователи. ][Ссылки могут видеть только зарегистрированные пользователи. ]

Шаг 1 - XHTML

Для начала создаем необходимую структуру.

demo.php

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

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

PHP код:

.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

PHP код:

$(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

PHP код:

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


[Ссылки могут видеть только зарегистрированные пользователи. ]

Шаг 5 - MySQL

Информация с SQL командами содержится в файле timeline.sql в папке с исходниками. С помощью этой информации можете создать необходимую таблицу БД.

Также Вам необходимо отредактировать данные доступа к Вашей БД в файле connect.php.

Заключение

Сегодня мы создали временную шкалу, которые Вы можете использовать для показа важных событий в Вашей жизни (или, например становление компании, сайта, фирмы, команды...).

(с) ruseller.com