Главная » 2015 » Сентябрь » 15 » TimeLine на Ucoz (Скрипты для ucoz)
15.09.2015, 01:30

TimeLine на Ucoz




Все, кто пользуется Мордокнигой, видел, как располагаются в ленте посты и записи. Данный скрипт позволяет оформить текст в таком стиле.

1. Туда где будет блок:
Код
<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>


2.Перед </body>:
Код
$(function(){  
$('#ucodes-timeline li:even').addClass('left');  
$('#ucodes-timeline li:odd').addClass('right');  
$('#ucodes-timeline li:last').addClass('highlight');  
});


3. В стили CSS:
Код
#ucodes-still-block {  
background: #fff;  
border-radius: 3px;  
border: 1px solid #c3cbdf;  
min-height: 60px;  
}  

#ucodes-timeline {  
background: url(/img/3.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(/img/2.png) 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(/img/2.png);  
background-position: -26px -28px;  
height: 21px;  
width: 15px;  
left: 50%;  
top: -20px !important;  
margin-left: -7px;  
}


4. Не забудте залить изображения в папку img в корне сайта
PS: Это не модуль комментарии или информер (хотя последнее сделать достаточно просто), а всего лишь стиль оформления блоков с текстом.

Демо на JSFile
Материал взят с сайта infoscript.ru
Теги: Скачать TimeLine на Ucoz
Скачать "TimeLine на Ucoz"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: uCodes
Категория: Скрипты uCoz | Просмотров: 1103 | Добавил: sold93 | Рейтинг: 4.0/1 |
Теги: uCoz, На, Timeline
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]