В некоторых случаях очень удобно перемещать элементы по странице. Например, вам нужно, чтобы при нажатии на кнопку «Войти», форма для ввода имени и пароля пользователя плавно выдвигалась в углу страницы.
Для создания такой формы используем 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 должен быть включен.
Удачных вам проектов.
Постовой
Эти чугунные батареи превзойдут все ваши ожидания.
