Pro jQuery
Адам Фриман
Работа с кнопкой Submit
Как можно понять из рисунке 11-5, наша страничка находится в промежуточной стадии разработки. Появился новый функционал, но его нужно еще тщательно обработать и связать с существующими элементами. Наиболее важным из них является кнопка Place Order, которая отправляет форму. В листинге 11-4 показаны дополнения к скрипту для работы с элементами (и добавления нового функционала).
Листинг 11-4: Работа с кнопкой Submit
<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');
$('h1').css({ "min-width": "0", width: "95%", });
$('#row2, #row3').hide();
$('#oblock').css({ float: "left", display: "inline", border: "thin black solid" });
$('form').css({ "margin-left": "auto", "margin-right": "auto", width: 885 });
var total = $('#buttonDiv')
.prepend("<div>Total Items: <span id=total>0</span></div>")
.css({ clear: "both", padding: "5px" });
$('<div id=bbox />').appendTo("body").append(total).css("clear: left");
function handleArrowMouse(e) {
}
function handleArrowPress(e) {
}
});
</script>
Чтобы сгладить изменения в верстке, вызванные кнопками карусели, я передвинул элемент div
, который содержит элемент button
(у него id
равно buttonDiv
), внутрь нового элемента div
, который я добавил элементу body
. Таким образом, кнопка передвинута вниз страницы. Также я добавил элементы div
и span
. Они будут использованы, чтобы отображать общее число единиц продукции, которые выбрал пользователь.
var total = $('#buttonDiv')
.prepend("<div>Total Items: <span id=total>0</span></div>")
.css({ clear: "both", padding: "5px" });
$('<div id=bbox />').appendTo("body").append(total).css("clear: left");
Следующим изменением на этой стадии является сокрытие двух рядов продукции. Это делается для того, чтобы показать их пользователям тогда, когда они нажимают на кнопки карусели:
$('#row2, #row3').hide();
Также я оптимизировал стиль элемента h1
, чтобы он подходил исправленному стилю верстки:
$('h1').css({"min-width": "0", width: "95%",});
Результат этих изменений можно увидеть на рисунке 11-6.
Рисунок 11-6: Работа с кнопкой submit и упорядочивание CSS