Timeline шаблонизатор на основе CSS3

1035
10 из 10
Проголосовало: 7






С открытием в Facebook timeline многие стали делать нечто подобное, изрядно полазив на эту тему нактнулся на пост в habrahabr где был пример основанный jQuery и CSS а именно на плагине jQuery Masonry который убирает пустоту между блоков. Но данный вариант не особо подошел и решил написать такой вариант:

И так:

Создаем основу HTML:

Код
<div id="ucodes-timeline">  
<li><i class="arrow"></i><div id="ucodes-still-block">Контент</div></li>  
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 2</div></li>  
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 3</div></li>  
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 4</div></li>  
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 5 Полный</div></li>  
</div>


Также напишем CSS распределения:

Код
#ucodes-still-block {  
background: #fff;  
border-radius: 3px;  
border: 1px solid #c3cbdf;  
min-height: 60px;  
}  

#ucodes-timeline {  
background: url(http://webo4ka.3dn.ru/_ld/41/45469073.png) repeat-y center;  
}  
#ucodes-timeline > li {  
float: left;  
clear: left;  
width: calc(50% - 14px);  
margin-bottom: 15px;  
position: relative;  
list-style: none;  
}  
#ucodes-timeline > .right {  
float: right;  
clear: right;  
}  
#ucodes-timeline .arrow {  
background: url(http://webo4ka.3dn.ru/_ld/41/s75295830.jpg) no-repeat;  
width: 20px;  
height: 15px;  
position: absolute;  
top: 20px;  
}  
#ucodes-timeline > .left + .right > .arrow {  
top: 35px;  
}  
#ucodes-timeline .right > .arrow {  
left: calc(0% - 18px);  
right: auto;  
background-position: -60px -28px;  
width: 19px;  
}  
#ucodes-timeline .left > .arrow {  
left: auto;  
right: calc(0% - 19px);  
background-position: -41px -28px;  
}  
#ucodes-timeline .highlight {  
clear: both;  
width: auto;  
float: none;  
}  
#ucodes-timeline .highlight .arrow {  
background-image: url(http://webo4ka.3dn.ru/_ld/41/s75295830.jpg);  
background-position: -26px -28px;  
height: 21px;  
width: 15px;  
left: 50%;  
top: -20px !important;  
margin-left: -7px;  
}


Ну и на последок .js классификация:

Код
$(function(){  
$('#ucodes-timeline li:even').addClass('left');  
$('#ucodes-timeline li:odd').addClass('right');  
$('#ucodes-timeline li:last').addClass('highlight');  
});


Также вы можете дописать стили и не использовать изображения. Данный пример обычный набросок, реализовать его можно разными путями. Кому как уж удобнее.
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://ucodes.ru/
  • Всего комментариев: 1

Marishka
0
Marishka написал: Написано 16 Января 2015 в 17:38
Комментарий №1
Оставьте предложения к версии 2.. Либо примеры к модулям, желательно в skype: SPAMMRAC

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    469
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: