Найти

Категории

Генератор форм

Конструктор форм

Для веб-мастера

  • AutoClicker - Автокликер для популярных тапалок в телеграм, который запускается на вашем ПК в браузере.
  • CheckTrust - сервис проверки качества сайтов. Экономия до 70% на аренде ссылок.
  • GoGetLinks - популярная система для получения качественных ссылок в обзорах с размещением навсегда.
  • Etxt.RU - биржа статей.
  • FastVPS - качественный VPS/VDS хостинг в германии.
  • Roistat - система сквозной бизнес-аналитики.

Реклама

Главная › ❶ Веб-программирование

Компактный просмоторщик новостей на jQuery

Рейтинг:
Дата: 11 октября 2010 Просмотры 8090

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

В общем выглядеть это будет так!

Итак, давайте начнем с разметки.

Разметка

У нас будет главный контейнер DIV с классом  "cn_wrapper", который будет содержать справа контейнер  с классом "cn_preview" и слева контейнер с классом "cn_list".  Контейнер  с классом "cn_preview"будет содержать элементы контента, а именно название, описание и ссылки на реальные статьи.  

Контейнер  с классом "cn_list"  будет иметь  список статей в соответствии с коротким описанием. В конце того же контейнера мы также добавим навигацию для пошагового просмотра страниц:

  <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>

Первая новость в контейнере предварительного просмотара имеет отступ от верхнего края 5px (style="top:5px;"), все остальные новости будут скрытыми так, как имеют отступ от верхнего края 310px

Элементы списка будут разделены на страницы, где каждая страница содержит не более 5 статей.

CSS

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

Давайте начнем с основного контейнера. Мы установим ему относительное позиционирование (position:relative) и внутри него будем абсолютно позиционировать  другие элементы:

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

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

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

Теперь определим стиль элементов, которые находятся внутри контейнера с  подробным описанием новости

Изображение всегда будет иметь максимальную ширину 215 pх. 

.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;
}

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

.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;
}

Параграфы  будут иметь фиксированную высоту и, если она длиннее, она будет отрезана:

.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;
}

Псевдокласс :active будет иметь следующий стиль:

.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 plugin.

Итак,  начнем с определения некоторых переменных:

//Кнопки «назад» и «вперед»
var $cn_next   = $('#cn_next');
var $cn_prev   = $('#cn_prev');

//список новостей 
var $cn_list   = $('#cn_list');
var $pages     = $cn_list.find('.cn_page');
//Определяем количество страниц
var cnt_pages  = $pages.length;
//По умолчанию выбираем первую страницу
var page = 1;
//Находим статьи
var $items   = $cn_list.find('.cn_item');
//Контейнер предварительного просмотра
var $cn_preview = $('#cn_preview');
//По умолчанию выводим перую статью
var current  = 1;

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

$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>

И вот оно что! Я надеючь, что вам понравился этот урок и Вы сочли его полезным!

Скачать искодники можно по этой ссылке!

Источник статьи: http://tympanus.net/codrops/2010/10/03/compact-news-previewer/

Оцените эту статью:



ТЕГИ:
jquery
Похожие статьи
Интересно почитать

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?

Простая CRM

Salesap CRM

Нашли ошибку в тексте

Система Orphus
Copyright © 2008-2024 Шамшур Иван. Все права защищены.
https://biznesguide.ru/coding/114.html
3,4 из 5 на основе 3 оценок.