This time I will share jQuery Plugin and tutorial about jQuery Plugin To Sort & Order HTML Lists – sdFilterMe, hope it will help you in programming stack.
sdFilterMe is a simple yet robust jQuery plugin which allows for sorting and re-ordering of html lists with custom animations and several useful options.
Key features:
- Filter through a group of elements using HTML5 data arrtibutes.
- Sort the elements in ascending or descending order.
- Smooth shuffle effect based on CSS3 transitions.
How to use it:
1. Include the main JS file jquery.sdFilterMe.js after you’ve included jQuery library.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery.sdFilterMe.js"></script> |
2. Uses CSS class for sorting / filtering data, and data-order for ordering data as follows:
02 |
<li class="food" data-title="2" data-order="2> |
05 |
<li class="sports" data-title="5" data-order="5"> |
08 |
<li class="sports" data-title="6" data-order="6"> |
11 |
<li class="business" data-title="1" data-order="1"> |
14 |
<li class="food" data-title="4" data-order="4"> |
3. If you want to append a link to the list item:
4. Create sorting / ordering buttons.
1 |
<button class="sorter" data-filter="food">Food</button> |
2 |
<button class="sorter" data-filter="sports">Sports</button> |
3 |
<button class="sorter" data-filter="business">Business</button> |
4 |
<button class="sorter" data-filter="nature">Nature</button> |
5 |
<button class="sorter" data-filter="*">All</button> |
7 |
<button class="orderer" data-order="asc">ASC</button> |
8 |
<button class="orderer" data-order="desc">DESC</button> |
5. Initialize the sdFilterMe plugin and done.
1 |
$('#sort-demo').sdFilterMe({ |
6. Possible options to customize the plugin.
01 |
$('#sort-demo').sdFilterMe({ |
02 |
filterSelector: '.sorter', |
03 |
orderSelector: '.orderer', |
07 |
sortedOut: 'disappear', |
16 |
border: '1px solid white', |
28 |
text: 'Nothing to show' |
7. The plugin provides an event which will ben triggered when the user clicks on a list item.
1 |
$('#sort-demo').sdFilterMe() |
2 |
.on('fm.boxClicked', function(e, position, order) { |
3 |
console.log('Box position is ' + position); |
4 |
console.log('Box sort order is ' + order); |
This awesome jQuery plugin is developed by stevedavid. For more Advanced Usages, please check the demo page or visit the official website.
