Смена вида материалов на jquery для Ucoz

Смена вида материалов на jquery для Ucoz

Смена вида материалов на jquery для Ucoz-суть этого скрипта что при нажатии определенной кнопки на сайте вид материалов сайта поменяется,в зависимости от того на какую кнопку вы нажали вид материалов может быть в колонку,в две,в три и в сетку

Установка:

Установите CSS стили с CSS.txt в файл с стилями или в общие шаблоны (Таблица стилей (CSS));
Между тегом head вставьте библиотеку иконок:

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Перед тегом ставим этот код

Код
<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>  


Вид материалов устанавливаем с файла - Вид материалов.txt
В то место где хотим видеть кнопки вставляем следующий код:

Код
<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>
Смена вида материалов на jquery для Ucoz
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: Turbo
Комментарии (0)
Добавить комментарий
class="add-comm-form clearfix add-shadow2" id="add-comm-form">
avatar