ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Смена вид материалов сайта на jquery uCoz

Смена вид материалов сайта на jquery uCoz

Смена вид материалов сайта на jquery uCoz
Скрипт работает хорошо, он позволяет одним нажатием изменить ваш вид материала, сделать его лентой сеткой в два или три колонны например.
Думаю многие это видели на разных ресурсах.

Установка:
1. Установите в CSS стили с архива CSS.txt
2. Вид материалов устанавливаем с файла - Вид материалов.txt
3. Между тегом head вставьте библиотеку иконок:
Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

В то место где хотим видеть кнопки вставляем следующий код:
Код
<div class="btn-group">  
  <a href="#" class="btn" id="grid-view"><i class="fa fa-th-large"></i></a><a href="#" class="btn" id="list-view"><i class="fa fa-list"></i></a><a href="#" class="btn active" id="grid3-view"><i class="fa fa-th"></i></a>  
  </div>

4. Перед закрывающим тегом body:
Код
<script type="text/javascript">  
  $('#grid-view').addClass('active');  
  $('#list-view').click(function(event){  
  event.preventDefault();  
  $('#allEntries [id^="entryID"] .item').removeClass('grid-item');  
  $('#allEntries [id^="entryID"] .item').removeClass('grid3-item')  
  $('#allEntries [id^="entryID"] .item').addClass('list-item');  
  $('#list-view').addClass('active');  
  $('#grid-view').removeClass('active');  
  $('#grid3-view').removeClass('active');  
  });  
  $('#grid-view').click(function(event){  
  event.preventDefault();  
  $('#allEntries [id^="entryID"] .item').addClass('grid-item');  
  $('#allEntries [id^="entryID"] .item').removeClass('grid3-item')  
  $('#allEntries [id^="entryID"] .item').removeClass('list-item');  
  $('#list-view').removeClass('active');  
  $('#grid-view').addClass('active');  
  $('#grid3-view').removeClass('active');  
  });  
  $('#grid3-view').click(function(event){  
  event.preventDefault();  
  $('#allEntries [id^="entryID"] .item').removeClass('grid-item');  
  $('#allEntries [id^="entryID"] .item').addClass('grid3-item')  
  $('#allEntries [id^="entryID"] .item').removeClass('list-item');  
  $('#list-view').removeClass('active');  
  $('#grid-view').removeClass('active');  
  $('#grid3-view').addClass('active');  
  });  
  </script>

Вот и всё установка завершена.
2015-12-05 Загрузок: 26 Просмотров: 2159 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 7
Kvint
Kvint 2015-12-05 18:431
0
Что то похоже на ютуб.
Kosten
Kosten 2015-12-05 19:552
0
Не чет так, с какого хостинга этот скрипт был переделан, просто как то мало вериться, что его под систему создавали.
vera123456
vera123456 2015-12-10 08:553
0
А демо где глянуть ?
Kosten
Kosten 2015-12-10 17:016
0
vera123456, думаю если было DEMO с материалом, то его бы прописали.
ZruBkul
ZruBkul 2015-12-10 16:234
0
А разве где то демо есть?
Kostik-malek
Kostik-malek 2015-12-10 16:525
0
Так то должно быть и продимонстрировать бы желательно.
Melisa
Melisa 2017-12-25 06:287
0
Как сделать со своими css классами?
avatar