Поздравительная открытка на javascript + jquery

Урок программирования по созданию виртуальной открытки.
Здравствуйте дорогие друзья! Сегодня я расскажу вам как сделать виртуальную поздравительную открытку с помощью javascript!

Как и в своих других уроках по javascript, сначала я немного расскажу о том, что мы получим в конце.

Открытка будет состоять из 4 полей для ввода данных:

– Заголовок открытки
– Ссылка на картинку
– Текст поздравления
– Автор открытки

При заполнении полей сразу виден визуальный результат – готовая открытка.

Где ее можно применить?

Например, вы можете сделать сервис создания и отправки поздравительных открыток, где каждый желающий может создать виртуальную открытку и отправить на указанный автором e-mail друга.
Давайте взглянем на html разметку:
<div id="wrapper">

	<div id="left">
	
		<p>Заголовок:<br><input id="title"></p>
		<p>Url картинки:<br><input id="img"></p>
		<p>Текст открытки:<br><textarea id="text"></textarea></p>
		<p>Автор открытки:<br><input id="author"></p>
		
	</div>
	
	<div id="right">
	
		<p id="new_title"></p>
		<p><img id="new_img" height="210" src="/"></p>
		<p id="new_text"></p>
		<p id="new_author">Сергей Оганесян</p>
	</div>

</div>

Как видите, у нас имеются два блока, в левом блоке расположены 4 текстовых поля, а в правом блоке 3 параграфа и одна картинка.

Теперь взглянем на jquery код

$(document).ready(function(){

	$('#left input,textarea').each(function(){

		$(this).bind('blur keypress', function() {

			if($(this).attr('id') == 'img') $('#new_img').attr('src',$(this).val());
			else $('#new_' + $(this).attr('id')).text($(this).val());

		});
	});
});

Кода очень мало, поэтому и комментариев приводить не буду, объясню суть в статье по шагам:

1. Выбираем из блока с id = left все элементы с тегом input и textarea;
2. При срабатывании одного из событий (наборе текста в полях или потере Фокуса) срабатывает функция;
3. Проверяем, если изменяется url картинки, значит изменяем атрибут: url;
4. Иначе изменяем содержимое параграфов;

Вот, в принципе, и все, объяснять здесь, думаю, больше нечего.

Теперь вы можете, как и обычно,  скачать исходные файлы со всеми стилями и разметкой.

Demo пример

Скачать исходники

На этом все, удачи!


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

  1. Beelime пишет:

    А как реализовать функционал отправки?

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>