Ho implementato un plug-in Jquery per identificare e ordinare una raccolta di elementi figlio avvolti in un genitore. Anche il plugin ha una capacità di raggruppamento.plug-in di ordinamento alfabetico: come aggiungere animazione "shuffle"
Sono un po 'perso su come aggiungere animazioni al cambio dom. Sono stato in grado di aggiungere un'animazione di base 'show' che introduce gli elementi, ma voglio creare un dolce effetto visivo 'shuffle'.
(function ($) {
$.fn.alphaSort = function(options) {
/**
* defaults: changing the keys will kill someone close to you. so, don't do it!
* **/
var settings = $.extend({
child: 'div', /**collection of child elements within the parent**/
target: 'span', /**the target element within a single child**/
order: 'asc', /**the sort order. existing options: asc & desc**/
group: true,/**group alphabetically or not**/
titleCss: 'row'/**the css class styling the header group.**/
}, options);
var data = 'data-name'; /**developer must set the values being compared, to a data attribute 'data-name'**/
var parent = this;
var children = this.find(settings.child);
var container = { letters: [] };
/**
* read the dom, each childs target element has a data attribute 'data-name'.
* read the data attribute and prepare a list of first letters.
* a key value pair is inserted into the container.
* key will be the first letter, the value will be a sublist, containing child elements.
* the child elements represent institutes which starts with the letter denoted by the key.
* **/
children.each(function(){
var elem = $(this).find(settings.target);
var name = elem.attr(data);
var l = name.substring(0,1).toUpperCase();
if (!(l in container)) {
container[l] = [];
container.letters.push(l);
}
container[l].push($(this));
});
/**
* sort the list of first letters stored.
* **/
container.letters.sort();
if(settings.order != "asc")
container.letters.reverse();
/**
* clear the parent element. get ready for dom manipulation.
* **/
parent.empty();
/**
* iterate through the firt letter list.
* sort each sublist. each sublist is identified by a first letter 'key'
* **/
$.each(container.letters, function(i,letter){
var list = container[letter];
list.sort(function(a,b){
var aelem = $(a).find(settings.target);
var aName = aelem.attr(data);
var belem = $(b).find(settings.target);
var bName = belem.attr(data);
/**
* returns
*-1: str1 is sorted before str2
* 1: str1 is sorted after str2
* 0: two strings are equal
* **/
return aName.toUpperCase().localeCompare(bName.toUpperCase());
});
/**
* if the init script set group to 'true', then group, else skip
* **/
if(settings.group)
parent.append("<div class = 'container-fluid'><div class='"+settings.titleCss+"'><h3 class = 'institute-group-h3'>"+letter+"</h3></div></div>");
/**
* append to dom
* **/
for(each in list)
parent.append(list[each]);
});
};
}(jQuery));