Перемещаем элементы html страницы с помощью JavaScript

Владимир | | CSS, HTML, JavaScript.

В некоторых случаях очень удобно перемещать элементы по странице. Например, вам нужно, чтобы при нажатии на кнопку «Войти», форма для ввода имени и пароля пользователя плавно выдвигалась в углу страницы.

Для создания такой формы используем JavaScript и библиотеку Scriptaculous. О подключении этой библиотеки к странице я уже писал в статье «Использование Scriptaculous для изменения прозрачности элементов web страницы». Поэтому, сразу перейдем к решению задачи.

У нас есть html страница с каким-нибудь содержанием. Форма для ввода имени и пароля, которая находится внутри <div id="loginForm">. И ссылка «Войти», щелчок по которой должен показывать форму.

<body>
<div id="header">
Это заголовок страницы
</div>
<div id="content">
<p>Здесь можно разместить содержимое страницы.</p>
<p>Чтобы посмотреть как работает форма нажмите на ссылку <a href="#" name="login" onclick="showForm('loginForm')">Войти</a></p>
<p>Убрать форму можно нажатием на ссылку "Спрятать форму" (расположена на форме).</p>
</div>
<div id="footer">
<p>…</p>
</div>
<div id="loginForm">
<form  method="get" action="#" name="loginForm">
<p>Имя:</p>
<p><input type="text" name="userName" size="20"></p>
<p>Пароль:</p>
<p><input type="password" name="userPas" size="20"></p>
<p><input type="submit" name="userSub" value="Войти"></p>
<p><a href="#" onclick="hideForm('loginForm')">Спрятать форму</a></p>
</form>
</div>

Замечание. Обратите внимание, что при нажатии на ссылку «Войти» будет вызвана функция showForm(), а при нажатии на ссылку «Спрятать форму» – hideForm(). Обоим функциям передается название элемента в котором расположена форма (loginForm).

В первую очередь, нам нужно убрать форму при первоначальной загрузке странице. Для этого в таблице стилей (CSS) устанавливаем элементу loginForm абсолютное позиционирование, и смещаем его за левую границу окна браузера:

#loginForm {
	position: absolute;
	width: 150px;
	height: 250px;
	left: -200px;
	top:0px;
}

Теперь напишем функцию, которая будет выдвигать форму на экран. Для перемещения формы мы используем эффект MoveBy из библиотеки Scriptaculous. Создать эффект очень просто. Вызываем метод MoveBy() объекта Effect:

new Effect.MoveBy(targetElement, 0, 200, {duration: 2});

В первом параметре указываем название элемента, который нужно перемещать, во втором – смещение по вертикальной оси, в третьем – смещение по горизонтальной оси. Четвертый параметр используется для настройки эффекта, например, можно задать время перемещения (в секундах).

Теперь посмотрим на функцию целиком:

function showForm(targetElement) {
	if ($(targetElement).offsetLeft < 0) {
		new Effect.MoveBy(targetElement, 0, 200, {duration: 2});
	}
}

Для того, чтобы форма не перемещалась при повторном нажатии на ссылку «Войти», мы добавили проверку текущего расположения формы. $(targetElement).offsetLeft – возвращает смещение левого края нашей формы относительно контейнера, т.е. окна браузера. Если это смещение меньше 0, то мы перемещаем форму, если нет – форма не двигается.

Убрать форму со страницы можно нажатием на ссылку «Спрятать форму».
Код функции hideForm() полностью аналогичен showForm(), за исключением знака смещения.

function hideForm(targetElement) {
	if ($(targetElement).offsetLeft >= 0) {
		new Effect.MoveBy(targetElement, 0, -200, {duration: 2});
	}
}

Вы можете скачать архив со всеми файлами проекта (библиотека Scriptaculous находится в папке lib, страница с формой и файлы со стилями и js-функциями – в папке movingForm).
Работа страницы проверялась в Firefox 2, IE 6 и Opera 9. Естесственно, JavaScript должен быть включен.

Удачных вам проектов.

Постовой

Эти чугунные батареи превзойдут все ваши ожидания.