Понедельник, 21 Мая 2012 14:00

Переключатель отображения списка новостей

Written by 
Оцени эту запись
(5 Голоса)

Допустим, нам нужно вывести список новостей. Информация о новости содердит:

 

  • Картинку
  • Дату
  • Название
  • Краткое описание (или просто начало)

 

Нужно дать возможность пользователю просматривать этот перечень новостей в двух режимах - краткий вывод всей информации (список выше) или просто дата и название новости. Для реализации этой задумки, используем просто скрипт на jQuery.

 

 

 

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

 

HTML:

 

<div class="news_list full">
<div class="switcher">
    <a href="javascript:void(0);" class="list"></a>
    <a href="javascript:void(0);" class="full active"></a>
    <br style="cleaR:both">
</div>
    <div class="news_item">
        <div class="img"><img src="/images/masc.jpg"></div>
        <div class="date">14.05.2012</div>
        <div class="name"><h4>Маска при помощи CSS</h4></div>
        <div class="text">В этой статье я расскажу как сделать аналог маски при помощи css. Тексту можно задавать только цвет, но нельзя задать фон. А если сильно нужно? То это можно обойти. Ведь главное создать видимость! мы сделаем видимость фона для текста. При этом сам текст не будет картинкой. </div>
    </div>
    <div class="news_item">
        <div class="img"><img src="/images/masc.jpg"></div>
        <div class="date">14.05.2012</div>
        <div class="name"><h4>Маска при помощи CSS</h4></div>
        <div class="text">В этой статье я расскажу как сделать аналог маски при помощи css. Тексту можно задавать только цвет, но нельзя задать фон. А если сильно нужно? То это можно обойти. Ведь главное создать видимость! мы сделаем видимость фона для текста. При этом сам текст не будет картинкой. </div>
    </div>
    <div class="news_item">
        <div class="img"><img src="/images/masc.jpg"></div>
        <div class="date">14.05.2012</div>
        <div class="name"><h4>Маска при помощи CSS</h4></div>
        <div class="text">В этой статье я расскажу как сделать аналог маски при помощи css. Тексту можно задавать только цвет, но нельзя задать фон. А если сильно нужно? То это можно обойти. Ведь главное создать видимость! мы сделаем видимость фона для текста. При этом сам текст не будет картинкой. </div>
    </div>
    <div class="news_item">
        <div class="img"><img src="/images/masc.jpg"></div>
        <div class="date">14.05.2012</div>
        <div class="name"><h4>Маска при помощи CSS</h4></div>
        <div class="text">В этой статье я расскажу как сделать аналог маски при помощи css. Тексту можно задавать только цвет, но нельзя задать фон. А если сильно нужно? То это можно обойти. Ведь главное создать видимость! мы сделаем видимость фона для текста. При этом сам текст не будет картинкой. </div>
    </div>

</div> 

 

Для изменения вида отображения, будем родительскому контейнеру с классом news_list задавать дополнительный класс list или full. В первом случае будем иметь дату и название, во втором увидим дополнительно картинку и вступление (краткое содержание). Аналогичным образом, можно выводить на страницу перечень товаров из категории (картинка+цена или картинка+описание+цена+кнопка "Купить"). Поскольку при клике на переключатель будет меняться класс родительского контейнера, мы можем задавать любые стили элементам страницы, которые будут отличаться в зависимости от класса.

 

Смотрим демо.

 

В моей случае CSS стили выглядят так:

 

 

.news_list {font-size: 12px; width: 800px; margin: 0 auto;}
.news_list .news_item h4 {color: #7D26CD; margin: 0px 0 3px 0; font-size: 16px;}
.news_list .news_item .img {float:left; margin-right: 5px; padding: 5px 0;}
.news_list .news_item .img img {width: 50px;}
.news_list .news_item {cleaR:left; border-bottom: 1px dotted #7D26CD; margin-bottom: 5px; padding-bottom: 5px;}
.news_list .news_item .date {font-size: 10px; color: #666; float:right;}
.news_list .news_item .text {clear:right;}
.switcher {padding: 5px; margin-bottom: 10px;}
.switcher a {display: block; floaT:left; margin: 0 1px; width: 10px; height: 11px; background: url(../images/news.png) no-repeat;}
.switcher a.list {background-position: -11px 0px;}
.switcher a.full {background-position: -11px -10px;}
.switcher a.list.active {background-position: 0px 0px;}
.switcher a.full.active {background-position: 0px -10px;}
.news_list.list .news_item .text {display: none;}
.news_list.list .news_item .date {float: left; padding: 1px 10px 2px 0;}
.news_list.list .news_item .img {display: none;}
.news_list.list .news_item h4 {font-size: 12px;}
 
 
А теперь рассмотрим скрипт. Для того, чтобы он работал, нужно в head вашего документа подключить библиотеку jQuery:
 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

 

Скрипт разберем подробнее:

 

$(document).ready(function(){
$('.switcher a').click(function(){
$('.switcher a').removeClass('active');
$(this).addClass('active');
if($(this).hasClass('full')){
$(this).parent().parent('.news_list').addClass('full');
$(this).parent().parent('.news_list').removeClass('list');
}
else {
$(this).parent().parent('.news_list').addClass('list');
$(this).parent().parent('.news_list').removeClass('full');
}
});
});
 
Переключатели сделаны в виде ссылок. У одного из них класс full, а у другого, соответственно list.  Изменение класса (а в результате и отображения) происходит при клике на переключатель:
 
 
 
$('.switcher a').click(function(){ });
 
 
Переключателю, на котором біл клик, добавляем класс active, а с другого переключателя этот класс снимаем:
 
 
$('.switcher a').removeClass('active');
$(this).addClass('active');
 
 
Если переключатель имеет класс full, то родительскому блоку с классом news_list(это соновной блок) добавляем класс full и удаляем класс list. В противном случае, деалем все наоборот.
 
 

 

if($(this).hasClass('full')){
$(this).parent().parent('.news_list').addClass('full');
$(this).parent().parent('.news_list').removeClass('list');
}
else {
$(this).parent().parent('.news_list').addClass('list');
$(this).parent().parent('.news_list').removeClass('full');
}
});
 
 
Переключатели готовы, пользуйтесь!

 

 

 

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов