—»     —»   Разработка переключателя список/сетка посредством jQuery
  Раздел: Руководства   Комментариев: 4  

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



Многие веб-интерфейсы включают в себя динамические переключатели вида. На странице продукции или в архиве блога вы наверняка встречали кнопки, предназначенные для переключения вида разметки между списком или небольшой сеткой. В нашем сегодняшнем руководстве мы займемся разработкой простенького примера при помощи основных параметров 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-библиотеки становится гораздо проще, нежели была раньше! Не забудьте поделиться результатами ваших работ с другими читателями посредством комментариев!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, jQuery, интерфейс
Опубликовал Design FactoRy   Прочитано (раз): 10034   |   Оставлено комментариев: 4
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 17 июля 2012 @ 16:23
Написал: alex0603 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Надо будет попробывать инкрустировать это в моё портфолио, если получится - отпишусь)
Комментарий #2: 30 июля 2012 @ 07:42
Написал: Ян Фихтер — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А как сделать так, чтобы изначально каталог отображался в виде таблицы, а по клику преобразовывался бы в список?
Комментарий #3: 30 июля 2012 @ 13:18
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Ян Фихтер,
1. с id="listview" убираете класс active и добавляете его в id="gridview".
2. в id="products" заменяете класс list на grid.
3. для картинок продуктов вместо list-default-thumb.png прописываете grid-default-thumb.png

Все.
Комментарий #4: 24 января 2014 @ 13:59
Написал: Андрей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
var classNames = $(this).attr('class').split(' ');

для чего эта строчка? переменная classNames ведь нигде не используется
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


тесла шоу
На спортивных мероприятиях и корпоративах
tesla-moscow.ru
Доставка цветов
Международная доставка цветов
rose.cvetok59.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31