Переключатель список/сетка с помощью 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>

Результат:

Список:

Список

Сетка:

Сетка

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