Органайзер
ДЕМО СКАЧАТЬ
Этот плагин JQuery специализируется для показа запланированного ряда мероприятий. Вы можете вставлять все виды средств массовой информации, в том числе твитов, видео и карты, и связать их с датой. С некоторыми настройками дизайна, это сделает его идеальным для портфеля, в котором вы можете запланировать свои работы и интересы.
HTML
Органайзер поставляется со светлой темой по умолчанию. Его можно прекрасно использовать в большинстве случаев. Тем не менее, для нашего органайзера, мы будем использовать темный дизайн.
Во-первых, давайте посмотрим на основные страницы:
index.html
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Timeline Portfolio | Tutorialzine Demo</title>
<!-- The default timeline stylesheet -->
<link rel="stylesheet" href="assets/css/timeline.css" />
<!-- Our customizations to the theme -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- Google Fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dancing+Script|Antic+Slab" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="timeline">
<!-- Timeline will generate additional markup here -->
</div>
<!-- JavaScript includes - jQuery, turn.js and our own script.js -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="assets/js/timeline-min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
|
В головной части, у нас есть строка стилей плагина - timeline.css и styles.css, которая проведет наши настройки. В сноске есть библиотеки, временной шкалы плагина и JQuery script.js который инициализирует его.
Когда мы вызываем плагин, он будет искать DIV на вашей странице с идентификатором сроки .Внутри него, он будет вставляет всю разметку, необходимую, чтобы представить график:
|
<div class="container main" id="timeline">
<div class="feature slider" style="overflow-y: hidden;">
<div class="slider-container-mask slider-container slider-item-container">
<!-- The divs below are the events of the timeline -->
<div class="slider-item content">
<div class="text container">
<h2 class="start">Johnny B Goode</h2>
<p><em><span class="c1">Designer</span> & <span class=
"c2">Developer</span></em></p>
</div>
<div class="media media-wrapper media-container">
<!-- Images or other media go here -->
</div>
</div>
<div class="slider-item content content-container">
<div class="text container">
<h2 class="date">March 2009</h2>
<h3>My first experiment in time-lapse photography</h3>
<p>Nature at its finest in this video.</p>
</div>
<div class="media media-wrapper media-container">
<!-- Images or other media go here -->
</div>
</div>
<!-- More items go here -->
</div>
<!-- Next arrow -->
<div class="nav-next nav-container">
<div class="icon"></div>
<div class="date">March 2010</div>
<div class="title">Logo Design for a pet shop</div>
</div>
<!-- Previous arrow -->
<div class="nav-previous nav-container">
<div class="icon"></div>
<div class="date">July 2009</div>
<div class="title">Another time-lapse experiment</div>
</div>
</div>
<div class="navigation">
<!-- The navigation items go here (the tooltips in the bottom)
one for each of the events -->
<div class="time">
<!-- The timeline numbers go here -->
</div>
</div>
<div class="timenav-background">
<div class="timenav-line" style="left: 633px;"></div>
<div class="timenav-interval-background top-highlight"></div>
</div>
<div class="toolbar" style="top: 27px;">
<div class="back-home icon" title="Return to Title"></div>
<div class="zoom-in icon" title="Expand Timeline"></div>
<div class="zoom-out icon" data-original-title="Contract Timeline"></div>
</div>
</div>
</div>
|
Обратите внимание, что мы не будем воссоздавать стиль плагина с нуля, мы будем переопределять некоторые правила в нашем собственном файле. Это делает будущие обновления плагина простым, не говоря уже о том, что это будет намного проще.
Хронология Портфолио с JQuery
Написание CSS, глядя на разметку в одиночку было бы сложной задачей, учитывая, что наши правила должны быть приоритетом над тем, что используются в timeline.css . К счастью, есть гораздо более простой способ, как вы увидите в разделе CSS этого урока.
JQuery
Для инициализации плагина, мы должны вызвать VMM.Timeline (метод) на готовый документ:
|
$(function(){
var timeline = new VMM.Timeline();
timeline.init("data.json");
});
|
Метод инициализации занимает один аргумент - источник данных. Это может быть либо JSON файл, как выше, или электронная таблица Google (напоминает наш Spredsheet Powered FAQ ).
Для получения дополнительной информации о поддерживаемых источников данных см. в документации на месте плагина , или просмотрите файл data.json для этого урока.
CSS
Я использовал Firebug в HTML инспектор, чтобы получить селекторы для элементов, которые мы собираемся настроить. На вкладке HTML, легко увидеть, что правила были применены к каждому элементу по timeline.css . Чтобы переопределить их, я скопировал те же селекторы styles.css, где наши изменения будут иметь место.
Давайте начнем!
Первое, что мы сделаем в styles.css , после укладки на страницу изменим фоны в временной шкале:
|
#timeline{
background:none;
}
/* The individual events in the slider */
.slider .slider-container-mask .slider-container{
background:none;
}
/* Setting a custom background image */
#timeline div.navigation{
background: url('../img/timeline_bg.jpg') repeat;
border-top:none;
}
|
Чтобы создать 3D эффект временной шкалы навигации, нам нужно будет использовать дополнительные элементы. Но плагин не включает такие в своей разметке. Простое решение заключается в использовании : перед / : после псевдо элементов. : После элементом является темная верхняя часть и использует линейный градиент для усиления эффекта.
|
#timeline div.navigation:before{
position:absolute;
content:'';
height:40px;
width:100%;
left:0;
top:-40px;
background: url('../img/timeline_bg.jpg') repeat;
}
#timeline div.navigation:after{
position:absolute;
content:'';
height:10px;
width:100%;
left:0;
top:-40px;
background:repeat-x;
background-image: linear-gradient(bottom, #434446 0%, #363839 100%);
background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%);
background-image: -moz-linear-gradient(bottom, #434446 0%, #363839 100%);
background-image: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%);
background-image: -ms-linear-gradient(bottom, #434446 0%, #363839 100%);
}
|
Затем мы добавляем темный фон к временной шкале навигации (раздел с небольшими интерактивными подсказками, которые представляют события):
|
#timeline div.timenav-background{
background-color:rgba(0,0,0,0.4) !important;
}
#timeline .navigation .timenav-background .timenav-interval-background{
background:none;
}
#timeline .top-highlight{
background-color:transparent !important;
}
|
Позже мы создадим стиль кнопок / зум-выход и панель инструментов:
|
#timeline .toolbar{
border:none !important;
background-color: #202222 !important;
}
#timeline .toolbar div{
border:none !important;
}
|
Дальше будет числовой масштаб:
|
#timeline .navigation .timenav .time .time-interval-minor .minor{
margin-left:-1px;
}
#timeline .navigation .timenav .time .time-interval div{
color: #CCCCCC;
}
|
Предыдущие и последующие стрелки:
|
.slider .nav-previous .icon {
background: url("timeline.png") no-repeat scroll 0 -293px transparent;
}
.slider .nav-previous,.slider .nav-next{
font-family:'Segoe UI',sans-serif;
}
.slider .nav-next .icon {
background: url("timeline.png") no-repeat scroll 72px -221px transparent;
width: 70px !important;
}
.slider .nav-next:hover .icon{
position:relative;
right:-5px;
}
.slider .nav-previous:hover, .slider .nav-next:hover {
color: #666;
cursor: pointer;
}
#timeline .thumbnail {
border: medium none;
}
|
Экран загрузки:
|
#timeline .feedback {
background-color: #222222;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset;
border:none;
}
#timeline .feedback div{
color: #AAAAAA;
font-size: 14px !important;
font-weight: normal;
}
|
Перейдем к слайдам:
|
#timeline .slider-item h2,
#timeline .slider-item h3{
font-family:'Antic Slab','Segoe UI',sans-serif;
}
#timeline .slider-item h2{
color:#fff;
}
#timeline .slider-item p{
font-family:'Segoe UI',sans-serif;
}
#timeline .slider-item img,
#timeline .slider-item iframe{
border:none;
}
|
Теперь, мы будем настраивать внешний вид главной страницы. Я использую NTH-ребенка (1) должен быть настроен только первый слайдер-пункт, в котором содержится имя и описание сроки, которые были определены в источнике данных JSON.
|
/* Customizing the first slide - the cover */
#timeline .slider-item:nth-child(1) h2{
font:normal 70px/1 'Antic Slab','Segoe UI',sans-serif;
background:rgba(0,0,0,0.3);
white-space: nowrap;
padding:10px 5px 5px 20px;
position:relative;
right:-60px;
z-index:10;
}
#timeline .slider-item:nth-child(1) p i{
font:normal normal 40px 'Dancing Script','Segoe UI',sans-serif;
background:rgba(0,0,0,0.3);
white-space: nowrap;
padding:5px 20px;
position:relative;
right:-60px;
z-index:10;
}
#timeline .slider-item:nth-child(1) p .c1{
color:#1bdff0;
}
#timeline .slider-item:nth-child(1) p .c2{
color:#c92fe6;
}
#timeline .slider-item:nth-child(1) .media-container {
left: -30px;
position: relative;
z-index: 1;
}
#timeline .slider-item:nth-child(1) .credit{
text-align: center;
}
|
Единственное, что осталось, это открыть timeline.psd , которое поставляется с загрузкой плагина, и изменить цвет некоторые значки в фотошопе. Я включил все необходимые в файлы скачивания для этого урока.
ДЕМО СКАЧАТЬ
Готово!
Источник
|
