Главная > Руководства > Разработка переключателя список/сетка посредством jQuery

Разработка переключателя список/сетка посредством jQuery


16 июля 2012, 12:45. Разместил: Design FactoRy
Многие веб-интерфейсы включают в себя динамические переключатели вида. На странице продукции или в архиве блога вы наверняка встречали кнопки, предназначенные для переключения вида разметки между списком или небольшой сеткой. В нашем сегодняшнем руководстве мы займемся разработкой простенького примера при помощи основных параметров CSS и некоторых команд jQuery.

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

Разработка переключателя список/сетка посредством jQuery

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.


Разработка основного кода 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>

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

<!-- row 1 -->
<li class="clearfix">
<section class="left">
<img src="images/products/list-default-thumb.png" alt="default thumb" class="thumb">
<h3>Product Name</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. Это используется в сеточной разметке для того, чтобы скрыть большие круглые кнопки до тех пор, пока пользователь не наведет курсор на продукт. Но в стандартном режиме списка это ни на что не повлияет. Те не менее, учтите, что HTML-код важно писать правильно с самого начала.

CSS-стили

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

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

/** grid view **/
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; }

Эффекты переключения 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";

Нам понадобится id для того, чтобы определить, на какой режим просмотра пользователь переключается. А также немного позже два URL миниатюр помогают нам обновить переключение вида с сетки на список.

Обновление отображения списка продуктов

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

if($(this).hasClass("active")) {
// if currently clicked button has the active class
// then we do nothing!
return false;
} else {
// otherwise we are clicking on the inactive button
// and in the process of switching views!

Внутри выражения 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");

// remove the list class and change to grid
theproducts.removeClass("list");
theproducts.addClass("grid");

// update all thumbnails to larger size
$("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");

// remove the grid view and change to list
theproducts.removeClass("grid")
theproducts.addClass("list");
// update all thumbnails to smaller size
$("img.thumb").attr("src",listthumb);
}

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

Разработка переключателя список/сетка посредством jQuery

В завершение

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