Вы, наверное, встречали на некоторых сайтах фильтрацию различных информационных блоков без перезагрузки страницы с JavaScript эффектами. Если захочется сделать что-то похожее, вам помогут готовые решения, опубликованные в сегодняшней заметке.
Я приведу несколько отличных фильтров на jQuery, которые вы с легкостью сможете использовать в своих проектах. Сфера применения может быть очень большой: от сайтов-портфолио до интернет-магазинов или каталогов.
В заметке приведены 8 фильтров различных по стилевому оформлению. Наслаждайтесь!
1. Фильтрация и сортировка блоков «Quicksand»
Плагин позволяет красиво реализовывать фильтрацию и сортировку элементов на странице с обалденным эффектом. Чтобы посмотреть эффект, на странице демонстрации понажимайте сверху на кнопки сортировки и фильтра.
2. Фильтрация блоков c использованием jQuery
Это решение отлично подойдет для реализации фильтров в интернет-магазинах или для оформления страниц-портфолио.
3. jQuery плагин jCoverflip
Интерактивная фильтрация блоков по меткам. Подойдет для реализации страницы портфолио либо для страницы с товарами, разбитыми по категориям. Попробуйте в действии этот плагин, для этого достаточно произвести переход между метками, которые выполнены в виде меню. Он, наверняка, вам понравится.
4. Фильтрация блоков на jQuery
Отлично подойдет для организации портфолио либо галереи на сайте. На демонстрационной странице нажимайте на ссылки вверху, чтобы увидеть результат работы плагина.
5. jQuery плагин «MobilySelect»
Плагин для фильтрации блоков: можно отображать либо все элементы, либо оставить блоки с каким-нибудь определенным классом. Фильтрация происходит с различными анимационными эффектами.
6. jQuery HTML5 портфолио
Реализация красивого портфолио с помощью jQuery и HTML5. Фишка портфолио в реализованном фильтре. Различные работы в портфолио отображаются в зависимости от выбранной категории.
7. Фильтрация блоков с содержимым на jQuery
С помощью плагина можно без перезагрузки страницы показывать блоки, относящиеся к какой-либо конкретной категории.
8. Фильтрация информационных блоков
Пользователь выбирает из серии ссылок нужную категорию, и ниже отображаются информационные блоки (например, описание товаров), отмеченные в этой категории. Чтобы лучше понять о чем идет речь, посмотрите демонстрационную страницу