Смена вида материалов на jquery
1393
10 из 10
Проголосовало: 11
Проголосовало: 11
Всем нам известен официальный магазин скриптов uscript для сайтов созданных в системе uCoz. Так вот, там есть замечательный скрипт смена вида материалов, но к сожалению он платный. Но все бы хотелось такой же, но бесплатный, и вот команда сайта uGarts написала свой собственный скрипт смена вида материалов на 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>
4) Вид материалов устанавливаем с файла - Вид материалов.txt
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>
Автор публикации: Загрузка
Загрузка
- Всего комментариев: 2
0
|
Дай линк. Что-то не ровно ставиться он.
|
0
|
Этот материал уже был на webo4k`e
|
- Оставить комментарий:
Меню сайта
Категории
Мини-чат
Последние комментарии
Это моя работа, которая велась давольно таки давно 
Времени было мало, поэтому я скачал полностью все, что было и сделал архив 
Времени было мало, поэтому я скачал полностью все, что было и сделал архив 
Последние темы
Опрос
Статистика
| 0 онлайн |
0 наших |
0 чужих |
0
Сегодня были
Топ пользователей:
 |  | | |  |  |
 |  |  |  |  |  |
- Обратная связь
- Правила
- RSS
- +18
- Мобильная версия
- Хостинг от uCoz
- Copyright - webo4ka.ru © 2010-2025 г.
- Design by Вовчик Администратор:)