Pro jQuery

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: Создание карусели для рядов с продукцией
или RSS канал: Что новенького на smarly.net