Как известно визуальное оформление продукта влияет на его спрос. Точнее чем удобнее пользователю работать с интерфейсом, тем возрастает интерес к ресурсу. Многие веб-интерфейсы включают в себя динамические переключатели вида. На странице продукции или в архиве блога вы наверняка встречали кнопки, предназначенные для переключения вида разметки между списком или небольшой сеткой. В нашем сегодняшнем посте мы рассмотрим разработку простенького примера при помощи основных параметров 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 могут в значительной степени улучшить восприятие вашего сайта посетителями.
Вот и все. Готово!
Материал взят из зарубежного источника http://vandelaydesign.com/blog/web-development/list-grid-view-switch/ и представлен исключительно в ознакомительных целях.
