Смена вид материалов сайта на 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> Вот и всё установка завершена. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 7 | |
|
| |
