вСкрипты для Юкоз

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

Вот и всё установка завершена.

источник: zornet.ru

Похожие посты