Fridaycode.net

Създаването на конкурентоспособни уеб базирани приложения в днешно време означава да се създаде нещо, което потребителят може да контролира сам. Едно от тези неща е динамичното добавяне и премахване на елементи. В примера днес ще разгледаме една базова формичка за добавяне на потребители. Тя изисква да се попълват полета с различна информация, както е показано на картинката.

Често срещан проблем, с който се сблъскваме при подобни ситуации е, че не знаем от колко полета има нужда потребителят, който използва нашето приложение. В такива случаи го караме да изброи параметрите, които иска в едно поле и да ги раздели със запетаи или други символи. Дори понякога се опитваме да прогнозираме колко е максималният брой неща, които той може да въведе и създаваме определен брой полета. Както се досещате това са доста примитивни методи. В тази статия ще ви покажа как с малко jQuery може да направите малко по-лесен живота на потребителите.

View DemoDownload

Нека се върнем на нашия пример, в който искаме да дублираме елемента с клас "item num1" и същевременно да инкрементираме името на класа "num1". В крайна сметка след дублиране ще трябва да получим следния код.

<div id="forms">
	<div class="item num1"> ... </div>
	<div class="item num2"> ... </div>
	<div class="item num3"> ... </div>
	<!-- ... -->
</div>

Идва моментът, в който трябва да разгледаме HTML структурата и CSS стайлинга.

HTML

<div class="contact-form">
	<form action="" method="post">
		<div class="controls">
			<span class="add">Добави</span>
			<span class="remove">Премахни</span>
		</div>

		<div class="separator"></div>

		<div id="forms">
			<div class="item num1">
				<p><label for="name">Име</label><input type="text" value="" name="name" id="name" /></p>
				<p><label for="email">Е-мейл</label><input type="text" value="" name="email" id="email" /></p>
				<p class="gender">
					<label for="man">Пол</label>
					<input type="radio" value="" name="gender" id="man" /><span>Мъж</span>
					<input type="radio" value="" name="gender" id="woman" /><span>Жена</span>
				</p>
				<p class="interests">
					<label for="sport">Интереси</label>
					<input type="checkbox" value="" name="gender" id="sport" /><span>Спорт</span>
					<input type="checkbox" value="" name="gender" id="music" /><span>Музика</span>
					<input type="checkbox" value="" name="gender" id="cinema" /><span>Кино</span>
					<input type="checkbox" value="" name="gender" id="cars" /><span>Автомобили</span>
					<input type="checkbox" value="" name="gender" id="motorcycle" /><span>Мотоциклети</span>
				</p>
			</div>
		</div>

		<div class="separator"></div>

		<span class="send">Изпрати</span>

	</form>
</div>

CSS

body{background:#ffffff;font-family:Tahoma,Arial,Verdana,sans-serif;font-size:11px;line-height:1.2em;margin:0;padding:0}
.clr{clear:both;overflow:hidden;font-size:0;line-height:0;height:0;}
ul{list-style:none;margin:0;padding:0}
a,img{outline:none;margin:0;padding:0}
form{padding:0;margin:0;}

.contact-form {
	color:#777;
	width:500px;
	margin:20px auto 0;
	background:#f8f8f8;
	border:1px solid #d5d5d5;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding:20px;
}

label {
	float:left;
	height:25px;
	line-height:25px;
	padding:1px 0 0;
	font-size:12px;
	font-weight:700;
	font-family:Arial,Tahoma,Verdana,sans-serif;
	width:70px;
}

input {
	float:left;
	color:#666;
	height:25px;
	line-height:24px;
	margin:0;
	padding:1px 4px 0;
	font-size:16px;
	font-weight:700;
	font-family:Arial,Tahoma,Verdana,sans-serif;
	text-align:left;
	background:#f7f7f7;
	border:1px solid #d5d5d5;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

p { clear:both;margin:0 0 20px;overflow:hidden; }

.separator { clear:both;height:0px;font-size:0;margin:20px 0;line-height:0;border-top:1px solid #d5d5d5;border-bottom:1px solid #fff; }

div.controls {
overflow:hidden;
}
span.add, span.remove, span.send {
	float:left;
	cursor:pointer;
	padding:0 8px;
	height:20px;
	line-height:20px;
	margin:0 10px 0 0;
	background:#f8f8f8;

	background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #ededed) );
	background-image: -moz-linear-gradient( center top, #ffffff 0%, #ededed 100%	);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* IE 7 & 8 */

	border:1px solid #d5d5d5;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
span.add:hover, span.remove:hover, span.send:hover {
	color:#336699;
	background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #ededed), color-stop(1, #ffffff) );
	background-image: -moz-linear-gradient( center top, #ededed 0%, #ffffff 100%	);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff'); /* IE 7 & 8 */
}

.gender span {float:left;margin:0 20px 0 4px;height:25px;line-height:24px;}
.interests span {float:left;margin:0 20px 0 4px;height:25px;line-height:24px;}
.gender input, .interests input { border:none; }

Като за типичен Javascript урок, в CSS-a няма нищо ново, на което да се обърне по-голямо внимание. Сега нека директно преминем към jQuery кода.

jQuery

$(document).ready(function() {
	//преброяваме колко елемента с клас .item имаме
	var i = $('#forms .item').size() + 1;

	//добавяне на шаблона
	$('span.add').click(function() {
		//HTML шаблона, който искаме да се добавя всеки път
		var item_html =
		'<div class="item num'+i+'">'+  //добавяме class "num'+i+'", който ще ни служи за маркер (пример num1, num2, num3 и т.н.)
			'<div class="separator"></div>'+
			'<p><label for="name">Име</label><input type="text" value="" name="name" id="name"></p>'+
			'<p><label for="email">Е-мейл</label><input type="text" value="" name="email" id="email"></p>'+
			'<p class="gender">'+
				'<label for="man">Пол</label>'+
				'<input type="radio" value="" name="gender" id="man"><span>Мъж</span>'+
				'<input type="radio" value="" name="gender" id="woman"><span>Жена</span>'+
			'</p>'+
			'<p class="interests">'+
				'<label for="sport">Интереси</label>'+
				'<input type="checkbox" value="" name="gender" id="sport"><span>Спорт</span>'+
				'<input type="checkbox" value="" name="gender" id="music"><span>Музика</span>'+
				'<input type="checkbox" value="" name="gender" id="cinema"><span>Кино</span>'+
				'<input type="checkbox" value="" name="gender" id="cars"><span>Автомобили</span>'+
				'<input type="checkbox" value="" name="gender" id="motorcycle"><span>Мотоциклети</span>'+
			'</p>'+
		'</div>';

		$(item_html).animate({ opacity: "show" }, "slow").appendTo('#forms');
		i++;
	});

	$('span.remove').click(function() {
		//оставяме винаги първия елемент
		if(i > 2)
		{
			$('.item:last').remove();
			i--;
		}
	});
});

Какво се случва с HTML след добавянето на елемент?

<div id="forms">
	<div class="item num1"> ... </div>
	<div class="item num2"> ... </div>
	<div class="item num3"> ... </div>
	<!-- ... -->
</div>

Както се вижда от примера при добавяне на елемент инкрементираме променливата i, а при премахване на елемент декрементираме променливатa i.

Инкрементиране на променлива e:

Увеличаването на стойността й с една единица. Оператора за инкрементиране се изписва с два плюса: ++

Декрементиране на променлива е:

Намаляването на стойността й с една единица. Оператора за декрементиране се изписва с два минуса: --

Съществуват два вида оператори за инкрементиране и декрементиране - префиксни и постфиксни, но за тях ще поговорим друг път. Разбира се, има много параметри и условности, като максимален/минимален брой елементи които добавяме, премахване на всички добавени елементи и така нататък, но използването им е въпрос на избор. Надявам се да сте разбрали основната идея и тази статия да ви помогне в изграждането на вашите приложения.