Class: Fx.Sort

Переупорядковує групу елементів з переходом.

Навчальні посібники/Демонстрації

• Fx.Sort
• Clientcide Навчальний посібник/Демо

Розширює

• Fx.Elements

Fx.Sort Метод: construct

Синтаксис

new Fx.Sort(elements[, options]);

Аргументи

1. elements - (array) Колекція Elements, до яких будуть застосовані ефекти.
2. options - (object, опціонально) Те саме, що й опції Fx.Elements плюс додаткові опції нижче.

Опції

• mode - (string) або "vertical" або "horizontal"; за замовчуванням "vertical"

Повертає

• (object) Новий екземпляр Fx.Sort.

Приклад

var mysort = new Fx.Sort($$('ul li'), {
  transition: Fx.Transitions.Back.easeInOut,
  duration: 1000
});
mysort.sort([2,0,1]); //a specific order
mysort.forward(); //forward (the original) order

Примітка

• Fx.Sort за замовчуванням не переупорядковує DOM; він просто розміщує елементи в x/y координатах, що підразумевають сортування, але їхнє розташування в DOM залишається незмінним, доки ви не виконаєте Fx.Sort:rearrangeDOM.

Fx.Sort Метод: getCurrentOrder

Отримує поточний порядок сортування.

Синтаксис

mySort.getCurrentOrder();

Повертає

• (array) Поточний стан сортування.

Fx.Sort Метод: sort

Візуально переставляє елементи в новий порядок.

Синтаксис

mySort.sort(order);

Аргументи

1. order - (array) новий порядок для елементів.

Повертає

• (object) Цей Fx.Sort екземпляр.

Приклад

mySort.sort([2,1,0]); //reverse

Примітки

• Якщо передати неповний порядок, Fx.Sort заповнить решту поточним сортуванням. Наприклад, якщо поточне сортування — 0,1,2, і ви виконаєте mySort.sort(1), результатом буде 1,0,2.

Fx.Sort Метод: rearrangeDOM

Переупорядковує DOM відповідно до поточного порядку сортування.

Синтаксис

mySort.rearrangeDOM(order); //order is optional

Аргументи

1. order - (array, опціонально) порядок для розташування DOM; за замовчуванням this.currentOrder.

Повертає

• (object) Цей Fx.Sort екземпляр.

Приклад

mySort.rearrangeDOM([1,3,2,0]);
mySort.rearrangeDOM(); //use current sort

Fx.Sort Метод: forward

Розташовує елементи в оригінальному порядку (0,1,2,3,тощо).

Синтаксис

mySort.forward();

Повертає

• (object) Цей Fx.Sort екземпляр.

Fx.Sort Метод: backward

Розташовує елементи в зворотному до оригінального порядку (...3,2,1,0).

Синтаксис

mySort.forward();

Повертає

• (object) Цей Fx.Sort екземпляр.

Fx.Sort Метод: reverse

Розташовує елементи в зворотному до поточного порядку.

Синтаксис

mySort.reverse();

Повертає

• (object) Цей Fx.Sort екземпляр.

Fx.Sort Метод: sortByElements

Sort за порядком, вказаним у колекції елементів; elements має бути масивом (колекцією) елементів серед тих, що були вказані при створенні.

Синтаксис

mySort.sortByElements(elements);

Аргументи

1. elements - (array або collection) колекція або масив елементів у новому порядку

Повертає

• (object) Цей Fx.Sort екземпляр.

Приклад

var mySort = new Fx.Sort($$('ul li'));
mySort.sortByElements([$('li3'), $('li2'), $('li1'), $('li0')]);

Примітки

• Елементи, передані в sortByElements, мають бути тими самими, що й передані в ефект при його створенні.

Fx.Sort Метод: swap

Міняє місцями позицію одного елемента з іншим.

Синтаксис

mySort.swap(element_1, element_2);

Аргументи

1. one - (mixed) Рядок з id або Element або посилання на Element для обміну
2. two - (mixed) Рядок з id або іншого Element або посилання на Element для обміну

Приклад

var mySort = new Fx.Sort($$('ul li'));
mySort.swap($('#li3'), $('#li0'));
//OR
mySort.swap(3, 0);

Повертає

• (object) Цей Fx.Sort екземпляр.