» »

Смена вид материалов сайта на 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>

Вот и всё установка завершена.
05.12.2015 Загрузок: 9 Просмотров: 705 Комментарий: (6)

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

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

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