Pro jQuery
Адам Фриман
Добавление кнопок навигации для карусели
Я собираюсь создать простую карусель, которая позволит пользователю перемещаться по страницам с цветами. Для начала нам нужны левая и правая кнопки для нумерации страниц. В листинге 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: Промежуточное состояние примера документа