Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2014 » Ноябрь » 3 » Органайзер


18:57
Органайзер

Органайзер

 

 

ДЕМО                          СКАЧАТЬ

Этот  плагин 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> &amp; <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 , которое поставляется с загрузкой плагина, и изменить цвет некоторые значки в фотошопе. Я включил все необходимые в файлы скачивания для этого урока. 

 

ДЕМО                          СКАЧАТЬ

 

Готово!

Источник

Категория: CSS//HTML//JS | Просмотров: 2398 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди