16
Tôi đã triển khai plugin Jquery để xác định và sắp xếp bộ sưu tập các phần tử con được bao bọc trong cha mẹ. Plugin cũng có khả năng nhóm.plugin sắp xếp alpha: cách thêm hoạt ảnh 'shuffle'
Tôi sắp bị mất về cách thêm hoạt ảnh vào thay đổi mái vòm. tôi đã có thể thêm vào một hoạt hình 'show' cơ bản mang lại các yếu tố, nhưng tôi muốn tạo ra một hiệu ứng hình ảnh 'shuffle' ngọt ngào.
(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));