jquery plugin Mixitup to implement animation filtering and sorting

Source: Internet
Author: User

What is Mixitup?

Mixitup is a jquery plugin that provides animation filtering and sorting.
Mixitup is great for managing portfolios, galleries and blogs for any sort or sorted content, but also as a powerful tool for engaging applications in the user interface and data visualization.
Mixitup plays a good job with your existing HTML and CSS, making it a great choice for responding to layouts.
Instead of using absolute positioning to control layout, Mixitup design works with existing online streaming layouts. To use percentages, media inquiries, inline-block, or even curved boxes? No problem!

Page code

1 2 3 4 5 6 <div id= "Container" > <div class= "Mix category-1" data-my-order= "1" > ... </div> <div class= "mix Category-1 "data-my-order=" 2 > ... </div> <div class= "Mix category-2" data-my-order= "3" > ... </div > <div class= "Mix category-2" data-my-order= "4" > ... </div> </div>

Mixitup the element in the mixed container of the target and class. Classification filtering adds custom data properties to class and sort attributes.

Build your filter control:

1 2 class= "Filter" data-filter= ". Category-1" >category 1 class= "filter" data-filter= ". Category-2" >category 2

Filtering occurs when the Filter button is clicked.

To build your sort control:

1 2 class= "Sort" data-sort= "MY-ORDER:ASC" >ascending order class= "Sort" data-sort= "My-order:desc" >descending Order

Sort occurs when the Sort button is clicked.

Css

1 2 3 #Container. mix{Display:none;}

In the style of the item, setting the target element does not display the attribute. Mixitup will display only those matching the current filter element.

Js

Instance Mixitup using jquery on the container:

1 2 3 $ (function () {$ (' #Container '). Mixitup ();

Using the IDs of our containers, we can instantiate the Mixitup and jquery methods. Mixitup ()

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.