You can order the elements based off a function you supply. In the example above, each item has a data-date-created
and data-title
attribute. The filter buttons have a data-sort
attribute with the value of the item’s attribute. Then, with some JavaScript, we can get the correct attribute and provide a function to sort by.
<li data-sort="title">Title</li>
<div class="item" data-title="Baseball">…</div>
// Sorting options
$('.sort-options button').on('click', function() {
var $this = $(this),
sort = $this.data('sort'),
opts = {};
// Hide current label, show current label in title
$('.sort-options .active').removeClass('active');
$this.addClass('active');
// We're given the element wrapped in jQuery
if (sort === 'date-created') {
opts = {
by: function($el) {
return $el.data('date-created');
}
}
} else if (sort === 'title') {
opts = {
by: function($el) {
return $el.data('title').toLowerCase();
}
};
}
// Filter elements
$grid.shuffle('sort', opts);
});
The opts
parameter can contain two properties. reverse
, a boolean which will reverse the array. by
is a function that is passed the element wrapped in jQuery. In the case above, we’re returning the value of the data-date-created or data-title attributes.
Calling sort with an empty object will reset the elements to DOM order.