Автор

Переключатель списка в сетку на 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

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


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

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


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

Таблицы являются неотъемлемой частью веб-дизайна. Они позволяют визуально организовать табличное содержимое, распределяя его по строкам и столбцам. Хотя они довольно просты в проектировании и кодировании больших экранов, все становится сложнее на небольших устройствах.


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

Вам необходимо организовать сетку для изображений, с динамической подгрузкой изображений, аналогом можно привести стену вконтакте по подгружаемости контента. В данном уроке мы рассмотрим как реализовать данный эффект.  На самом деле возможностей реализовать этот эффект достаточно много, и мы бы хотели поделиться своим опытом. Некоторые эффекты позаимствованы от CSS3 scroll effects, написанных Hakim El Hattab. Для распределения изображений в сетке, воспользуемся библиотекой Masonry.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close