Pro jQuery
Адам Фриман
Применение функций обработки событий для карусели
И вот у нас вырисовывается кое-что, что отличается от того, с чего мы начинали. Следующим нашим шагом будет применение функций обработки событий для кнопок карусели. В первую очередь я собираюсь заняться событиями mouseenter
и mouseexit
, которые обрабатывает функция handleArrowMouse
. В листинге 11-5 показано применение этой функции.
Листинг 11-5: Обработка событий карусели
function handleArrowMouse(e) {
var propValue = e.type == "mouseenter" ? "-50px 0px" : "0px 0px";
$(this).css("background-position", propValue);
}
Хитростью работы с комбинированными рисунками является использование свойства background-position
, чтобы сдвинуть рисунок таким образом, чтобы была видна только та часть, которую вы хотите. И хотя в моем наборе стрелочек есть три рисунка, я собираюсь использовать только два. Самое темное изображение будет показано в обычном порядке, а среднее изображение будет показано тогда, когда мышка находится над элементом. Мы могли бы использовать оставшуюся стрелку, чтобы представить кнопку, на которую кликают или которая отключена, но я не хочу все усложнять. Два состояния, которые представляют эти изображения, можно увидеть на рисунке 11-7.
Рисунок 11-7: Два состояния кнопок со стрелками
Функция handleArrowPress
отвечает за создание эффекта карусели, позволяя пользователю постранично переходить от ряда к ряду с цветами. В листинге 11-6 показано применение этой функции.
Листинг 11-6: Применение функции handleArrowPress
function handleArrowPress(e) {
var elemSequence = ["row1", "row2", "row3"];
var visibleRow = $('div.drow:visible');
var visibleRowIndex = jQuery.inArray(visibleRow.attr("id"), elemSequence);
var targetRowIndex;
if (e.target.id == "left") {
targetRowIndex = visibleRowIndex - 1;
if (targetRowIndex < 0) { targetRowIndex = elemSequence.length - 1 };
} else {
targetRowIndex = (visibleRowIndex + 1) % elemSequence.length;
}
visibleRow.fadeOut("fast", function () {
$('#' + elemSequence[targetRowIndex]).fadeIn("fast")
});
}
Первые три выражения в этой функции представляют базовые данные, которые нам нужны:
var elemSequence = ["row1", "row2", "row3"];
var visibleRow = $('div.drow:visible');
var visibleRowIndex = jQuery.inArray(visibleRow.attr("id"), elemSequence);
Первое выражение определяет набор значений атрибута id
для элементов в ряду (строке таблицы). Второе выражение использует jQuery, чтобы получить видимый ряд. А затем это используется для того, чтобы определить индекс видимого ряда в массиве значений id
рядов (я делаю это при помощи вспомогательного метода inArray
, который я объясню в главе 33). Теперь мы знаем, какой ряд видим и где именно в очереди рядов мы находимся. И далее, я вычисляю индекс ряда, который будет отображаться следующим:
var targetRowIndex;
if (e.target.id == "left") {
targetRowIndex = visibleRowIndex - 1;
if (targetRowIndex < 0) { targetRowIndex = elemSequence.length - 1 };
} else {
targetRowIndex = (visibleRowIndex + 1) % elemSequence.length;
}
Почти во всех других языках программирования я мог бы использовать modulo
оператор (оператор модуля), чтобы выяснить индекс следующего отображаемого ряда, но в JavaScript есть ошибка по реализации математического модуля, и он не совсем корректно поддерживает отрицательные значения. Таким образом, если пользователь нажимает на левую кнопку, я вручную проверяю границы массива, а если пользователь нажимает на правую кнопку, я использую %
. Как только я выясняю текущий видимый элемент и элемент, который будет отображен следующим, я использую эффекты jQuery, чтобы создать анимацию перехода от одного элемента к другому:
visibleRow.fadeOut("fast", function () {
$('#' + elemSequence[targetRowIndex]).fadeIn("fast")
});
Я использовал методы fadeOut
и fadeIn
, потому что они хорошо работают с моей табличной CSS версткой. Я использую функцию обратного вызова в первом эффекте, чтобы запустить второй, и выполняю оба эффекта, установив время исполнения на fast
. В статической верстке страницы нет никаких изменений, но кнопки со стрелками сейчас будут перемещать пользователя от одного ряда с цветами к другому, как показано на рисунке 11-8.
Рисунок 11-8: Создание карусели для рядов с продукцией