Домой / Для сайта / Переключатель список/сетка с помощью JQuery (Switch List/Grid View using jquery)
Переключатель список/сетка с помощью JQuery (Switch List/Grid View using jquery)

Переключатель список/сетка с помощью JQuery (Switch List/Grid View using jquery)

Многие веб-разработчики рано или поздно сталкиваются с задачей создать динамический переключатель вида. Его использую на страницах продукции товаров, блогах и портфолио.

В этой статье я покажу как за несколько минут с помощью CSS и JQuery можно очень легко создать переключатель вида. 

Демо

HTML

Для начала нам нужно добавить немного html разметки:

</p>
<p class="r"><div id="container">
<div class="buttons">
<button class="grid">Grid View</button>
<button class="list">List View</button>
</div>
 <ul class="list">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
   <li>Item 7</li>
 </ul>
</div></p>
<p class="r">

CSS

Теперь добавляем стили для сетки и списка:


#container ul { list-style: none; }
#container .buttons { margin-bottom: 20px; }

#container .list li { width: 100%; border-bottom: 1px dotted #CCC; margin-bottom: 10px; padding-bottom: 10px; }

#container .grid li { float: left; width: 20%; height: 50px; border-right: 1px dotted #CCC; border-bottom: 1px dotted #CCC; padding: 20px; }

JQuery

Последняя часть кода — маленький скрипт:

(function($) {
$('button').on('click',function(e) {
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('list').addClass('grid');
}
else if($(this).hasClass('list')) {
$('#container ul').removeClass('grid').addClass('list');
}
});
})(jQuery);

Обязательно должна быть подключена библиотека JQuery.

Если у вас на сайте она еще не подключена, сделать это можно вставив в шапку или в подвал вашего сайта следующее:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

Результат:

Список:

Переключатель вида список/сетка

Список

Сетка:

Переключатель вида список/сетка

Сетка

Если у вас что-то не получилось или остались вопросы — задавайте в комментария.

Многие веб-разработчики рано или поздно сталкиваются с задачей создать динамический переключатель вида. Его использую на страницах продукции товаров, блогах и портфолио. В этой статье я покажу как за несколько минут с помощью CSS и JQuery можно очень легко создать переключатель вида.  HTML Для начала нам нужно добавить немного html разметки: CSS Теперь добавляем стили для сетки и списка: #container ul&hellip;

Обзор

Проголосуйте за статью

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.83 ( 2 голосов )
100

6 комментариев

  1. Аватар

    Огромное спасибо!!! Давно искал!

  2. Аватар
    Алексей

    Огромное вам спасибо, особенно за ссылку в статье!

  3. Аватар

    Добрый день. Подскажите как правильно подключить сохранение выбранного варианта в куки? Чтобы в случае нескольких страниц продукции товаров, при переходе на другую страницу, сохранялся выбранный вариант отображения контента 🙂 Спасибо большое.

  4. Аватар

    Установил фильтр Premmerce WooCommerce Product Filter(да и другие ставил с включенным ajax — все они затирают переключатель), но он затирает куки Grid / List после выборки на ajax, список/сетка переключатель перестает работать, пробовал ставить и другие плагины Grid / List переключателей все тоже самое, как решить проблему?

  5. Аватар

    Без куки или LocalStorage бесполезен…

Оставить комментарий

Ваш email не будет опубликован.

*