Главная страница   /   11.4. Работа с кнопкой Submit (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

11.4. Работа с кнопкой 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