Авторизация



Напомнить пароль
Регистрация


РазработкаФильтрация информационных блоков c использованием jQuery

Фильтрация блоков на jQuery

Вы, наверное, встречали на некоторых сайтах фильтрацию различных информационных блоков без перезагрузки страницы с JavaScript эффектами. Если захочется сделать что-то похожее, вам помогут готовые решения, опубликованные в сегодняшней заметке.

Я приведу несколько отличных фильтров на jQuery, которые вы с легкостью сможете использовать в своих проектах. Сфера применения может быть очень большой: от сайтов-портфолио до интернет-магазинов или каталогов. 

В заметке приведены 8 фильтров различных по стилевому оформлению. Наслаждайтесь!

1. Фильтрация и сортировка блоков «Quicksand»

jQuery плагин для увеличения изображения

Плагин позволяет красиво реализовывать фильтрацию и сортировку элементов на странице с обалденным эффектом. Чтобы посмотреть эффект, на странице демонстрации понажимайте сверху на кнопки сортировки и фильтра. 

2. Фильтрация блоков c использованием jQuery

Фильтрация блоков на jQuery

Это решение отлично подойдет для реализации фильтров в интернет-магазинах или для оформления страниц-портфолио.

Демо

Подготовлено по материалам: efimov.ws

Скачать

3. jQuery плагин jCoverflip

jQuery фильтрация блоков

Интерактивная фильтрация блоков по меткам. Подойдет для реализации страницы портфолио либо для страницы с товарами, разбитыми по категориям. Попробуйте в действии этот плагин, для этого достаточно произвести переход между метками, которые выполнены в виде меню. Он, наверняка, вам понравится.

4. Фильтрация блоков на jQuery

jQuery фильтрация блоков

Отлично подойдет для организации портфолио либо галереи на сайте. На демонстрационной странице нажимайте на ссылки вверху, чтобы увидеть результат работы плагина.

5. jQuery плагин «MobilySelect»

Фильтрация блоков c использованием jQuery

Плагин для фильтрации блоков: можно отображать либо все элементы, либо оставить блоки с каким-нибудь определенным классом. Фильтрация происходит с различными анимационными эффектами.

6. jQuery HTML5 портфолио

Портфолио jQuery

Реализация красивого портфолио с помощью jQuery и HTML5. Фишка портфолио в реализованном фильтре. Различные работы в портфолио отображаются в зависимости от выбранной категории. 

7. Фильтрация блоков с содержимым на jQuery

Фильтрация блоков на jQuery

С помощью плагина  можно без перезагрузки страницы показывать блоки, относящиеся к какой-либо конкретной категории.

8. Фильтрация информационных блоков

Фильтр блоков

Пользователь выбирает из серии ссылок нужную категорию, и ниже отображаются информационные блоки (например, описание товаров), отмеченные в этой категории. Чтобы лучше понять о чем идет речь, посмотрите демонстрационную страницу

Подготовлено по материалам: efimov.ws

  • 0
  • Автор: efimov
  • Дата: 18 ноября 2011, 16:38
  • В избранное:


Комментарии (4)

rss свернуть / развернуть
Спасибо большое! =)
свернуть ветку
Пожалуйста!
свернуть ветку
Понравился варант №1 — так аккуратно выполнено!
Спасибо большое!
свернуть ветку
Не могу понять в первом скрипте такую штуку. Ставлю картинки чуть больше и при фильтрации, по какой-либо позиции, картинки друг на друга в кучу собираются. Сам скрипт просто кашей одной — ничего не понятно. Что можно с этим сделать?
свернуть ветку
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.