—»     —»   Компактная форма предпросмотра новостей с помощью jQuery
  Раздел: Руководства   Комментариев: 4  

Компактная форма предпросмотра новостей с помощью jQuery



Компактная форма предпросмотра новостей с помощью jQuery

Сегодня мы будем создавать форму предварительного просмотра новостей, которая будет отображать вам свежайшие новости в компактном виде. Новости будут отображены по левой стороне с предварительным обзором статьи и небольшим описанием с правой стороны. Как только вы кликаете по левой стороне, предварительный просмотр будет раскрываться.

Давайте приступим к разработке разметки.

Разметка

Здесь у нас будет основной контейнер «cn_wrapper», который будет содержать в себе элемент правой стороны с классом «cn_preview» и элемент правой стороны с классом «cn_list». DIV предварительного просмотра будет содержать в себе элементы контента. Каждый из них будет содержать в себе миниатюру статьи, заголовок и описание, а также ссылку на полную версию статьи.
В списке по левой стороне у нас будет соответствующее короткое описание пунктов. Мы также добавим навигацию по страницам в конце контейнера:

<div class="cn_wrapper">
    <div id="cn_preview" class="cn_preview">
        <div class="cn_content" style="top:5px;">
            <img src="images/polaroidphotobar.jpg" alt=""/>
            <h1>Polaroid Photobar Gallery with jQuery</h1>
            <span class="cn_date">28/09/2010</span>
            <span class="cn_category">Tutorials</span>
            <p>In this tutorial we are going to create an...</p>
            <a href="http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/" target="_blank" class="cn_more">Read more</a>
        </div>
        <div class="cn_content">
            <img src="images/fullpageimagegallery.jpg" alt=""/>
            <h1>Full Page Image Gallery with jQuery</h1>
            <span class="cn_date">08/09/2010</span>
            <span class="cn_category">Tutorials</span>
            <p>In this tutorial we are going to create a stunning...
                </p>
            <a href="http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/" target="_blank" class="cn_more">Read more</a>
        </div>
        ...
    </div>
    <div id="cn_list" class="cn_list">
        <div class="cn_page" style="display:block;">
            <div class="cn_item selected">
                <h2>Polaroid Photobar Gallery with jQuery</h2>
                <p>Tutorial on how to create a gallery in polaroid style</p>
            </div>
            <div class="cn_item">
                <h2>Full Page Image Gallery with jQuery</h2>
                <p>Another tutorial on how to make a full gallery</p>
            </div>
            ...
        </div>
        <div class="cn_page">
            ...
        </div>
        <div class="cn_page">
            ...
        </div>
        <div class="cn_nav">
            <a id="cn_prev" class="cn_prev disabled"></a>
            <a id="cn_next" class="cn_next"></a>
        </div>
    </div>
</div>

Первому пункту в контейнере предварительного просмотра уже будет задан стиль, как будто он раскрыт, а именно позиционирован на 5 пикселей от верхней границы. Все остальные пункты будут «скрыты», так как им будет задано 310 пикселей от верхней границы.

Список пунктов будет разделен на страницы, где каждая страница будет содержать в себе 5 пунктов.

Давайте посмотрим на стилизацию.

CSS

Мы воспользуемся множеством параметром CSS3 для создания привлекательных эффектов. Мы используем тени, закругленные границы и градации как с цветами RGB, так и в формате HEX.

Давайте начнем с основного контейнера. Мы зададим ему параметр относительного положения, чтобы в дальнейшем можно было воспользоваться абсолютным позиционированием внутри него:

.cn_wrapper{
    margin:90px auto 0px auto;
    width:500px;
    height:300px;
    position:relative;
    color:#fff;
    overflow:hidden;
    padding:5px;
    text-shadow:1px 1px 1px #000;
    border:1px solid #111;
    background-color:#333;
    -moz-box-shadow:1px 1px 4px #222;
    -webkit-box-shadow:1px 1px 4px #222;
    box-shadow:1px 1px 4px #222;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

Заголовкам будут заданы следующие стили:

.cn_wrapper h1{
    font-size:20px;
    text-transform:uppercase;
}
.cn_wrapper h2{
    font-size:12px;
    border-bottom:1px solid #000;
    padding-bottom:4px;
    text-transform:uppercase;
}

Тэг h2 используется для списка предварительного просмотра и создает черную нижнюю линию, что придает интересный эффект. Это сработает, так как элемент «p», идущий за ним, создаёт линию в качестве верхней границы, но только с более ярким цветом.

Миниатюра и список также будут позиционированы в качестве абсолютных, поэтому мы сначала определим основной стиль, а затем перепишем левый для миниатюры:

.cn_preview, .cn_list{
    width:250px;
    height:300px;
    position:absolute;
    top:2px;
    left:6px;
}
.cn_preview{
    left:255px;
}

Внутри блока с предварительным просмотром у нас есть несколько элементов с содержимым, которым будут заданы следующие стили:

.cn_content{
    border:1px solid #444;
    top:310px;/*5*/
    left:5px;
    width:219px;
    padding:10px;
    position:absolute;
    background-color:#101010;
    height:275px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

Эти элементы будут анимированы посредством javascript. По умолчанию нам нужно спрятать их, поэтому мы выставим значение верхней границы большее, чем размер всей обложки. Поэтому мы устанавливаем скрытое значение наполнению обложки, т.е. мы не увидим ничего из того, что выходит за границы обложки.

Теперь давайте зададим стили элементам внутри DIV’а с содержимым. В нашем случае у изображения максимальная ширина всегда будет 215 пикселей. Учтите, что если у вас изображения разного размера, вам придется адаптировать все элементы под них. В данном случае у нас изображение, ширина которого 119 пикселей. На данном значении ширины мы будем основываться.

.cn_content img{
    width:215px;
    -moz-box-shadow:1px 1px 4px #000;
    -webkit-box-shadow:1px 1px 4px #000;
    box-shadow:1px 1px 4px #000;
}

Дата и категория будут позиционированы в абсолюте в нижней части DIV’а с контентом:

.cn_date{
    position:absolute;
    bottom:30px;
    right:8px;
    font-size:11px;
}
.cn_category{
    position:absolute;
    bottom:30px;
    left:8px;
    font-size:11px;
    padding:1px 3px;
    background:#ccc;
    border:1px solid #ddd;
    color:#000;
    text-shadow:-1px 0px 1px #fff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

Описание, которое является элементом «p» будет иметь фиксированную высоту, и если эта высота будет превышена, то сообщение будет урезано:

.cn_content p{
    height:57px;
    margin-top:2px;
    overflow:hidden;
}

Кнопка перехода к полной версии новости будет украшена градацией, тенью от блока и закругленными углами (нижние левый и правый), чтобы её внешний вид соответствовал всему содержимому:

a.cn_more{
    position:absolute;
    padding: 4px 0px;
    left:0px;
    bottom:0px;
    width:236px;
    color:#fff;
    text-align:center;
    font-size:12px;
    letter-spacing:1px;
    text-shadow:1px 1px 1px #011c44;
    text-transform:uppercase;
    text-decoration: none;
    border:1px solid #4c7ecb;
    outline:none;
    cursor:pointer;
    background-color: #1951A5;
    background-image:
        -moz-linear-gradient(
            top,
            rgba(255,255,255,0.25),
            rgba(255,255,255,0.05)
        );
    background-image:
        -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0, rgba(255,255,255,0.25)),
            color-stop(1, rgba(255,255,255,0.05))
        );
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -border-bottom-left-radius: 5px;
    -border-bottom-right-radius: 5px;
    -moz-box-shadow:1px 1px 3px #111;
    -webkit-box-shadow:1px 1px 3px #111;
    box-shadow:1px 1px 3px #111;
}

Изменение цвета шрифта при наведении создаст привлекательный эффект гравировки:

a.cn_more:hover{
    color: #011c44;
    text-shadow: 1px 1px 1px #ccdffc;
}

Теперь мы зададим стиль пунктам списка. Здесь у нас будет градация в качестве фона, которая и будет изменяться при наведении курсора мыши. Мы также зададим эффект при наведении для выбранного пункта.

.cn_item{
    border:1px solid #090909;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    height:49px;
    color:#fff;
    padding:5px;
    margin:6px 5px 0px 0px;
    text-shadow:1px 1px 1px #000;
    background:#2b2b2b;
    background:
        -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#171717),
            to(#2b2b2b)
        );
    background:
        -moz-linear-gradient(
            top,
            #171717,
            #2b2b2b
        );
    -moz-box-shadow:1px 1px 3px #111;
    -webkit-box-shadow:1px 1px 3px #111;
    box-shadow:1px 1px 3px #111;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.cn_item:hover, .selected{
    border-color:#4c7ecb;
    background-color: #1951A5;
    background-image:
        -moz-linear-gradient(
            top,
            rgba(255,255,255,0.25),
            rgba(255,255,255,0.05)
        );
    background-image:
        -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0, rgba(255,255,255,0.25)),
            color-stop(1, rgba(255,255,255,0.05))
        );
}

Гравированная линия под заголовком также будет изменяться в цвете:

.cn_item:hover h2,
.cn_list .selected h2,
.cn_item:active h2{
    border-color:#2C5FAC;
}
.cn_item:hover p,
.cn_list .selected p,
.cn_item:active p{
    border-color:#527CBB;
}

Псевдо-класс активного положения ссылок, например, когда мы кликаем на пункт, также будет отформатирован эффектом выгравированного текста. Это реализовано посредством данного стиля:

.cn_item:active {
    color: #011c44;
    text-shadow: 1px 1px 1px #ccdffc;
}

Краткое описание в пункте списка будет ограничено фиксированной высотой и оформлено верхней границей, также как и нижняя граница h2. Все вместе это создаст эффект гравировки:

.cn_list p{
    height:29px;
    padding-top:2px;
    overflow:hidden;
    border-top:1px solid #333;
}

Теперь давайте оформим навигацию. Мы также зададим ей позиционирование в абсолюте по нижнему краю контейнера со списком:

.cn_nav{
    width:55px;
    height:24px;
    position:absolute;
    bottom:0px;
    left:94px;
}

Последующие и предыдущие элементы будут отформатированы тем же стилем:

a.cn_next, a.cn_prev{
    float:left;
    height:23px;
    width:23px;
    background-color:#212121;
    background-repeat:no-repeat;
    background-position:center center;
    cursor:pointer;
    outline:none;
    border:1px solid #111;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

Теперь нам нужно установить индивидуальные стили, которые будут являться фоновыми изображениями:

a.cn_next{
    background-image:url(../images/next.png);
}
a.cn_prev{
    margin-right:5px;
    background-image:url(../images/prev.png);
}

При наведении курсора мыши мы просто заменяем фоновый цвет:

.cn_nav a:hover{
    background-color:#101010;
}

Когда мы кликаем по пункту навигации, он передвигается вниз на 1 пиксель, т.е. выглядит нажатым. Это можно сделать посредством поднятия поля на 1 пиксель вверх:

.cn_nav a:active{
    margin-top:1px;
    background-color:#000;
}

Неактивному элементу навигации будет задан уровень прозрачности 0.5:

.cn_nav a.disabled{
    opacity:0.5;
}

Последнее, что нам нужно сделать, это определить то, что страницы списка не должны быть видимыми. Мы сделаем их видимыми посредством javascript:

.cn_page{
    display:none;
}

Это был стиль. Теперь давайте добавим эффекты посредством jQuery!

javascript

Для некоторых эффектов мы будем использовать плагин jQuery easing.
В нашей функции jQuery мы начнем определение переменных:

//caching
//next and prev buttons
var $cn_next    = $('#cn_next');
var $cn_prev    = $('#cn_prev');
//wrapper of the left items
var $cn_list     = $('#cn_list');
var $pages        = $cn_list.find('.cn_page');
//how many pages
var cnt_pages    = $pages.length;
//the default page is the first one
var page        = 1;
//list of news (left items)
var $items         = $cn_list.find('.cn_item');
//the current item being viewed (right side)
var $cn_preview = $('#cn_preview');
//index of the item being viewed.
//the default is the first one
var current        = 1;

Для каждого пункта мы зададим индекс относительный всему документу. Также нам надо задействовать событие по клику кнопкой мыши, которое выдвигает или скрывает пункты. В зависимости от текущего пункта (если это событие идет после или до нового клика кнопкой мыши), кликнутый следующий пункт будет перемещен вверх или вниз:

$items.each(function(i){
    var $item = $(this);
    $item.data('idx',i+1);

    $item.bind('click',function(){
        var $this         = $(this);
        $cn_list.find('.selected').removeClass('selected');
        $this.addClass('selected');
        var idx            = $(this).data('idx');
        var $current     = $cn_preview.find('.cn_content:nth-child('+current+')');
        var $next        = $cn_preview.find('.cn_content:nth-child('+idx+')');

        if(idx > current){
            $current.stop()
                    .animate({
                        'top':'-300px'
                    },600,'easeOutBack',function(){
                        $(this).css({'top':'310px'});
                    });
            $next.css({
                'top':'310px'
            }).stop()
              .animate({
                'top':'5px'
              },600,'easeOutBack');
        }
        else if(idx < current){
            $current.stop()
                    .animate({
                        'top':'310px'
                    },600,'easeOutBack',function(){
                        $(this).css({'top':'310px'});
                    });
            $next.css({
                'top':'-300px'
            }).stop()
              .animate({
                'top':'5px'
              },600,'easeOutBack');
        }
        current = idx;
    });
});

Теперь мы определим то, что будет происходить при нажатии на следующий пункт в навигации. Следующая страница должна затемниться, если она активна, а кнопка должна быть отключена, если следующей страницы нет:

$cn_next.bind('click',function(e){
    var $this = $(this);
    $cn_prev.removeClass('disabled');
    ++page;
    if(page == cnt_pages)
        $this.addClass('disabled');
    if(page > cnt_pages){
        page = cnt_pages;
        return;
    }
    $pages.hide();
    $cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
    e.preventDefault();
});

То же самое нужно реализовать и для перехода к предыдущей странице:

$cn_prev.bind('click',function(e){
    var $this = $(this);
    $cn_next.removeClass('disabled');
    --page;
    if(page == 1)
        $this.addClass('disabled');
    if(page < 1){
        page = 1;
        return;
    }
    $pages.hide();
    $cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
    e.preventDefault();
});

Для того, чтобы придать более красивый вид всей форме, мы оформим заголовки, добавив следующие строки в заголовок в коде HTML:

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Bebas_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
    Cufon('.cn_wrapper h1,h2', {
        textShadow: '-1px 1px black'
    });
</script>

Вот и все!

Надеемся, что данная статья поможет вам и окажется полезной вам!

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript, jQuery
Опубликовал Mysterious Master   Прочитано (раз): 5934   |   Оставлено комментариев: 4
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 31 октября 2010 @ 10:43
Написал: player — группа: Читатели  
На сайте с: 16.04.2010   |   Публикаций: 0   |   Комментариев: 35
ICQ: --- не указано ---
Очередное спасибо за статью по jQuery!
Комментарий #2: 31 октября 2010 @ 10:55
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1492   |   Комментариев: 177
ICQ: --- не указано ---
player, как всегда, пожалуйста! На днях еще будут ..
Комментарий #3: 29 ноября 2010 @ 13:16
Написал: Drofa — группа: Читатели  
На сайте с: 1.10.2010   |   Публикаций: 0   |   Комментариев: 11
ICQ: 643208630
Очень интересно. Спасибо за подборку !!! wink
Комментарий #4: 29 ноября 2010 @ 13:23
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3304   |   Комментариев: 500
ICQ: --- не указано ---
Drofa, пожалуйста! Ещё будет ..
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2019    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
30