Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

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

Органайзер

 

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

 

ДЕМО                          СКАЧАТЬ

 

Готово!

Источник

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

Статьи
[Прогараммирование]
Как работает CSS?
[Прогараммирование]
ЛЕКЦИЯ. Язык Pascal
[Прогараммирование]
Введение в информатику
[Прогараммирование]
Строковый тип данных
[Прогараммирование]
Динамическая память
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Безопасность систем]
Резервирование и восстановление
[Прогараммирование]
Файлы
[Прогараммирование]
ПОДПРОГРАММЫ. ПРОЦЕДУРЫ И ФУНКЦИИ
[Менеджмент]
Факторы микросреды организации

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2024Конструктор сайтов - uCoz