jQuery Plugin For Filtering and Sorting Html Elements - MixItUp

jQuery Plugin For Filtering and Sorting Html Elements - MixItUp
File Size: 37 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

MixItUp is a flexible and useful jQuery plugin for filtering and sorting a group of html elements with CSS3 transition effects. MixItUp uses jQuery to decide which elements to hide, show or re-position based on your filters, and then applies the power of CSS3 transitions to smoothly animate these elements to their new locations.

See also:

Features:

  • Responsive design
  • Support all major browsers
  • smooth animations
  • Highly customizable via CSS and javascript
  • Drag and drop supported
  • Free for non-commercial and commercial use.

Basic Usage:

1. Include jQuery library and jQuery MixItUp on your html page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mixitup.min.js"></script>

2. Create filter controls

<ul>
<li class="filter" data-filter="all">Show All</li>
<li class="filter" data-filter="category_1">Category 1</li>
<li class="filter" data-filter="category_2">Category 2</li>
<li class="filter" data-filter="category_3">Category 3</li>
<li class="filter" data-filter="category_3 category_1">Category 1 &amp; 3</li>
</ul>

3. Create Sort controls

<ul>
<li class="sort" data-sort="data-cat" data-order="desc">Descending</li>
<li class="sort" data-sort="data-cat" data-order="asc">Ascending</li>
<li class="sort" data-sort="default" data-order="desc">Default</li>
</ul>

4. Create Html elements

<ul id="Grid">
<li class="mix category_1" data-cat="1">1</li>
<li class="mix category_3" data-cat="3">3</li>
<li class="mix category_2" data-cat="2">2</li>
<li class="mix category_3" data-cat="3">3</li>
<li class="mix category_2" data-cat="2">2</li>
<li class="mix category_1" data-cat="1">1</li>
<li class="gap"></li>
<!-- "gap" elements fill in the gaps in justified grid -->
</ul>

5. The CSS

.controls {
display: inline-block;
width: 180px;
margin: 0 0 30px;
vertical-align: top;
}
.controls li {
margin-left: 20px;
cursor: pointer;
list-style-type: square;
}
.controls li.active {
font-weight: 700;
}
#Grid {
width: 640px;
text-align: justify;
font-size: 0.1px;
}
#Grid:after {
content: '';
display: inline-block;
width: 100%;
}
#Grid .mix {
display: none;
opacity: 0;
width: 200px;
height: 200px;
vertical-align: top;
margin-bottom: 20px;
background: #ccc;
color: #fff;
font-size: 30px;
text-align: center;
line-height: 200px;
}
#Grid .gap {
display: inline-block;
width: 200px;
}

6. Initialize the plugin

<script type="text/javascript">
		
$(function(){
	$('#Grid').mixitup();
});
			
</script>

Change Log:

v2.0.4 (2014-03-13)

  • Bugs fixed.

v1.5.6 (2013-12-03)

  • Chrome Fix Patch for non-ID instances

v1.5.5 (2013-11-14)

  • Chrome 31.x Layout Bug Fix

This awesome jQuery plugin is developed by patrickkunka. For more Advanced Usages, please check the demo page or visit the official website.