регистрация
856материалов
3260комментариев
227тем на форуме
6728пользователей

Смена положения и вида материалов на jQuery



Описание скрипта:

Малый и понятный, адаптивный, надеюсь красивый (каждому не угодишь) вид материалов, и скрипт к нему; Смысл скрипта и вида материала заключается в том что при нажатии кнопки меняется вид материалов, а точнее становится лентой. сеткой в два или три колонны.

Установка скрипта:

1) Установите CSS стили с CSS.txt в файл с стилями или в общие шаблоны (Таблица стилей (CSS));

2) Между тегом head вставьте библиотеку иконок
Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

3) А перед закрывающим тегом 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>
Скрипт очень простой, на jQuery, и понятный .removeClass - удалить класс, .addClass - добавить, при нажатии на кнопку происходит действие по смене классов, одни удаляются, другие присваиваются;

4) Вид материалов устанавливаем с файла - Вид материалов.txt, один важный момент, иконку я оставил для примера, для каждой категории вы можете присвоить свою с помощью переменной
Код
<?if($CATEGORY_NAME$='Название категории')?>иконка<?endif?>

5) В то место где хотим видеть кнопки вставляем следующий код:
Код
<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>


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 11.07.2015 в 01:00
Материал просмотрен: 2318 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 2 комментария

Пожаловаться
Сказать спасибо
Источник

2 комментария


Алексей Малышев 12.07.2015 15:361
-2
Бестолковый скрипт. cookie не поддерживает
oZbestru
Павел @oZbestru 12.07.2015 22:552
+1
куки туда обязательно надо
avatar
Партнерская программа uKitCPA
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 4
Гостей: 4
Пользователей: 0