Автор

Переключатель списка в сетку на jQuery и CSS

Переключатель списка в сетку на jQuery и CSS


 

Как известно визуальное оформление продукта влияет на его спрос. Точнее чем удобнее пользователю работать с интерфейсом, тем возрастает интерес к ресурсу. Многие веб-интерфейсы включают в себя динамические переключатели вида. На странице продукции или в архиве блога вы наверняка встречали кнопки, предназначенные для переключения вида разметки между списком или небольшой сеткой. В нашем сегодняшнем посте мы рассмотрим разработку простенького примера при помощи основных параметров CSS и некоторых команд jQuery.

 

ДЕМО
ИСХОДНИКИ

 

Для создания подобного списка нам понадобятся  элементы интерфейса из набора Zephirro E-Commerce, который включает в себя кнопки и миниатюры фотографий. Вы можете использовать код из представленной демонстрации для собственных проектов. Этого эффекта довольно сложно добиться, но если вы поймете суть, то у вас будет возможность не то что удивить пользователей, а повысить уровень удобства пользования вашим сайтом.

 

Шаг 1. HTML

Главная страница не такая уж и сложная, но содержит в себе довольно много повторяющегося кода. Практически в самом верху мы включили две ссылки с id listview и gridview.

<span class="list-style-buttons">
 <a href="#" id="gridview" class="switcher"><img src="images/grid-view.png" alt="Grid"></a>
 <a href="#" id="listview" class="switcher active"><img src="images/list-view-active.png" alt="List"></a>
</span>

 

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

<li class="clearfix">
 <section class="left">
 <img src="images/products/list-default-thumb.png" alt="default thumb" class="thumb">
 <h3>Название продукта</h3>
 <span class="meta">Product ID: 543J423</span>
 </section>

 <section class="right">
 <span class="price">$45.00</span>
 <span class="darkview">
 <a href="javascript:void(0);" class="firstbtn"><img src="images/read-more-btn.png" alt="Read More..."></a>
 <a href="javascript:void(0);"><img src="images/add-to-cart-btn.png" alt="Add to Cart"></a>
 </span>
 </section>
</li>

 

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

 

Для того чтобы все было ясно, здесь мы обернули кнопки продуктов в span-элемент с заданным классом .darkview. Это используется в сеточной разметке для того, чтобы скрыть большие круглые кнопки до тех пор, пока пользователь не наведет курсор на продукт.

 

Шаг 2. CSS

В план нашего проекта входит задача адаптировать каждый пункт списка на основе текущего класса UL. Используя jQuery мы можем менять их со списка на сетку, а затем для каждого применять стили. Список выставлен по умолчанию, и поэтому все связанные с ним селекторы мы оставляем в том же блоке кода.

ul.list { list-style: none; width: 100%; }
ul.list li { display: block; background: #c9d0d1; padding: 10px 15px; }
ul.list li.alt { background: #d7dfe0; }
ul.list li section.left { display: block; float: left; width: 350px; position: relative; padding-left: 20px; }
ul.list li section.right { display: block; float: right; margin-right: 10px; width: 250px; text-align: right; }
ul.list li section.left img.thumb { float: left; margin-right: 10px; }
ul.list li section.left img.featured-banner { position: absolute; left: -18px; top: 35px; }
ul.list li section.left h3 { font-family: "Trebuchet MS", Arial, sans-serif; font-weight: bold; text-transform: uppercase; color: #707375; font-size: 1.4em; line-height: 1.6em; }
ul.list li section.left span.meta { color: #93989b; font-weight: normal; font-size: 1.1em; }
ul.list li section.right span.price { font-weight: bold; display: block; margin-bottom: 15px; color: #ad3939; font-size: 1.6em; text-align: right; }
ul.list li section.right a.firstbtn { margin-right: 7px; }

 

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

Очень интересно взглянуть на код, где для сеточной разметки указан класс darkview. Этот span изначально выставлен на 0 (уровень плотности отображения), а переходы выставлены на полное отображение. Для некоторых людей такая разметка может показаться надоедливой, но это ведь всегда можно обыграть так, чтобы функционал веб-сайта не вызывал отрицательных эмоций.

ul.grid { list-style: none; margin: 0 auto; padding-left: 25px; }
ul.grid li { position: relative; display: block; float: left; width: 220px; height: 200px; border-right: 1px solid #b6bdbe; padding: 5px 22px; margin-bottom: 20px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
ul.grid li.third { border: 0; }
ul.grid li section.left { position: relative; }
ul.grid li section.right { /* nothing */ }
ul.grid li section.left img.featured-banner { position: absolute; top: 0; }
ul.grid li section.left h3 { font-family: "Trebuchet MS", Arial, sans-serif; font-weight: bold; text-transform: uppercase; color: #707375; font-size: 1.4em; line-height: 1.5em; }
ul.grid li section.left span.meta { display: block; color: #93989b; font-weight: normal; font-size: 1.1em; margin-bottom: 7px; }
ul.grid li section.right span.price { font-weight: bold; display: block; margin-bottom: 5px; color: #ad3939; font-size: 1.75em; }

ul.grid li section.right span.darkview {
opacity: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
width: 190px;
height: 200px;
margin: 0 15px;
border-radius: 6px;
background: rgba(40, 45, 55, 0.75);
overflow: hidden;
text-align: center;
padding-top: 35px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
-moz-transition: opacity 0.25s linear 0s;
-o-transition: opacity 0.25s linear 0s;
}
ul.grid li:hover section.right span.darkview { opacity: 1; }
ul.grid li section.right span.darkview a.firstbtn { display: block; margin-bottom: 10px; }

 

Шаг 3. jQuery

Мы включаем последнюю версию jQuery прямо с облачного хостинга Google для разработчиков. Затем мы создаем новый файл script.js, куда мы можем записывать весь код функционала. Давайте рассмотрим его:

$(document).ready(function(){

 $("a.switcher").bind("click", function(e){
 e.preventDefault();

 

Как только документ загрузится, jQuery привяжет контроллер событий при клике к анкорным ссылкам с классом .switcher. Нам нужно отключить привязку к чему-либо, и предотвратить исходные действия браузера. Затем нам нужно выставить несколько переменных, которые сохранят наше время, которое может быть потрачено на написание селекторов.

var theid = $(this).attr("id");
var theproducts = $("ul#products");
var classNames = $(this).attr('class').split(' ');
var gridthumb = "images/products/grid-default-thumb.png";
var listthumb = "images/products/list-default-thumb.png";

 

Последняя часть нашего кода содержит несколько простых объявлений if/else. Сперва мы проверяем, обозначена ли классом active нажатая кнопка. Это будет означать, что пользователь уже просматривает нужную разметку, и нам не нужно ничего предпринимать. В противном случае нам нужно будет выяснить id кнопки и соответствующим образом переключить разметку.

if($(this).hasClass("active")) {
 return false;
} else {

 

Внутри выражения else мы выполняем еще две логические проверки. Во-первых, мы смотрим, кликнул ли пользователь по переходу на сеточный вид, и обновляем текущий список объектов на отображение в стиле сетки. В противном случае мы переключаемся обратно от сетки к формату списка.

 

 

Строки кода повторяются в нескольких разных функциях. Во-первых, мы обновляем текущую активную кнопку и изменяем изображения таким образом, чтобы выделить новый формат отображения. Затем мы исключаем предыдущий класс grid/list для того, чтобы применить обновленное выделение вместе с изменениями миниатюр.

if(theid == "gridview") {
 $(this).addClass("active");
 $("#listview").removeClass("active");
 $("#listview").children("img").attr("src","images/list-view.png");
 var theimg = $(this).children("img");
 theimg.attr("src","images/grid-view-active.png");

 theproducts.removeClass("list");
 theproducts.addClass("grid");
 $("img.thumb").attr("src",gridthumb);
}

else if(theid == "listview") {
 $(this).addClass("active");
 $("#gridview").removeClass("active");

 $("#gridview").children("img").attr("src","images/grid-view.png");
 var theimg = $(this).children("img");
 theimg.attr("src","images/list-view-active.png");
 theproducts.removeClass("grid")
 theproducts.addClass("list");
 $("img.thumb").attr("src",listthumb);
}

 

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

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Переключатель списка в сетку на jQuery и CSS

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..


Переключатель списка в сетку на jQuery и CSS

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


Переключатель списка в сетку на jQuery и CSS

Отображение информации на странице в виде jQuery вкладок.


Переключатель списка в сетку на jQuery и CSS

Вопрос: почему мало создать сайт и разместить его адрес на POS-материалах?

Я создал сайт, потратил кучу денег на его «раскрутку», разместив везде его адрес. Почему же я до сих пор беден?!

Больной вопрос, который задают многие клиенты. Самое смешное, что они действительно искренне недоумевают, почему же столь успешный (в задумке) проект до сих пор не начинает работать. И главное, что этот клиент не из тех, кто любит строить воздушные замки и воплощать в жизнь свои самые смелые фантазии, а самый, что ни на есть трудоголик, который даже во сне посредством и благодаря своей неутомимости в работе и преданности делу способен вывести свою алхимическую «формулу бизнес-счастья и commerce-изобилия». Итак, возьмем на себя смелость и проведем небольшую работу по «препарированию» (простите за черный юмор) данной проблемы.


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close