Главная страница   /   11.3. Добавление кнопок навигации для карусели (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

11.3. Добавление кнопок навигации для карусели

Я собираюсь создать простую карусель, которая позволит пользователю перемещаться по страницам с цветами. Для начала нам нужны левая и правая кнопки для нумерации страниц. В листинге 11-3 показано, как я добавил их в документ.

Листинг 11-3: Добавление кнопок навигации для карусели
<script type="text/javascript">
	$(document).ready(function () {
		var fNames = ["Carnation", "Lily", "Orchid"];
		var fRow = $('<div id=row3 class=drow/>').appendTo('div.dtable');
		var fTemplate = $('<div class=dcell><img/><label/><input/></div>');

		for (var i = 0; i < fNames.length; i++) {
			fTemplate.clone().appendTo(fRow).children()
				.filter('img').attr('src', fNames[i] + ".png").end()
				.filter('label').attr('for', fNames[i]).text(fNames[i]).end()
				.filter('input').attr({ name: fNames[i], value: 0, required: "required" })
		}

		$('<a id=left></a><a id=right></a>')
			.prependTo('form')
			.css({
				"background-image": "url(leftarrows.png)",
				"float": "left",
				"margin-top": "15px",
				display: "block", width: 50, height: 50
			})
			.click(handleArrowPress)
			.hover(handleArrowMouse)

		$('#right').css("background-image", "url(rightarrows.png)").appendTo('form');
		$('#oblock').css({ float: "left", display: "inline", border: "thin black solid" });
		$('form').css({ "margin-left": "auto", "margin-right": "auto", width: 885 });

		function handleArrowMouse(e) {
		}

		function handleArrowPress(e) {
		}
	});
</script>

Сначала я определяю пару элементов, соотношу их к элементу form и использую метод css, чтобы установить значения для нескольких различных свойств:

$('<a id=left></a><a id=right></a>')
	.prependTo('form')
	.css({
		"background-image": "url(leftarrows.png)",
		"float": "left",
		"margin-top": "15px",
		display: "block", width: 50, height: 50
	})
	.click(handleArrowPress)
	.hover(handleArrowMouse)

Ключевым свойством является background-image, для которого я устанавливаю leftarrows.png. Это изображение можно увидеть на рисунке 11-3.

Рисунок 11-3: Изображение leftarrows.png

В этом изображении объединены три различных стрелки. Каждая стрелка шириной в 50 пикселей, и устанавливая свойства width и height на 50, я уверен в том, что в любое время будет показана только одна из стрелок.

Я использую методы click и hover, чтобы определить функции обработки для событий click, mouseenter и mouseexit.

$('<a id=left></a><a id=right></a>')
	.prependTo('form')
	.css({
		"background-image": "url(leftarrows.png)",
		"float": "left",
		"margin-top": "15px",
		display: "block", width: 50, height: 50
	})
	.click(handleArrowPress)
	.hover(handleArrowMouse)

Функции handleArrowPress и handleArrowMouse пусты. Я скоро заполню их. На данной стадии у меня есть два элемента arrow, оба отображают стрелки влево и оба располагаются рядом друг с другом в элементе form. Я создал и отформатировал элементы a вместе, потому что конфигурация во многом схожа. А сейчас самое время передвинуть и обработать кнопку вправо, что я и делаю следующим образом:

$('#right').css("background-image", "url(rightarrows.png)").appendTo('form');

Я использую метод append, чтобы передвинуть элемент в конец элемента form, и использую метод css, чтобы изменить свойство background-image, дав ему значение rightarrows.png. Это изображение видно на рисунке 11-4.

Рисунок 11-4: Изображение rightarrows.png

Использование комбинированных изображений, наподобие этих, является общепринятым техническим приемом, поскольку браузеру не нужно совершать дополнительных действий и создавать три различных запроса на сервер, чтобы получить три тесно связанных друг с другом изображения. Вы увидите, как можно использовать такой вид изображений, когда я заполню функцию handleArrowMouse. На рисунке 11-5 представлено, как выглядит страница.

Рисунок 11-5: Промежуточное состояние примера документа