Создаем всплывающие окна авторизации
Часто бывает, что при создании сайта нужно вставить форму авторизации на страницу, но эта форма ни куда не вписывается по дизайну. Все возможные места заняты или там есть место только для одного слова или маленькой картинки. Выход тут простой – можно создать скрытую форму авторизации, которая при необходимости может быть открыта перед страницей нажатием на небольшую кнопку, ссылку или картинку.
Теперь подробно рассмотрим последовательность создания всплывающих окон, и в частности, окна авторизации. Тут используется технология jQuery, как и во многих других случаях подобного рода.
-
Нужно скачать архив с папками js и css в которых находятся стили и библиотеки jQuery.
-
Распаковать архив в папку где будет находится ваша страница.
-
Подключить библиотеку jQuery, плагин и таблицу стилей к странице:
<link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
-
в разделе BODY, в том месте, где нужно, вставляем кнопку или ссылку или картинку с вызовом функции. Ниже приведены два примера вызова окна авторизации :
-
<a id="openD" href="#" class="podval">Вход</a>
-
<span style="cursor: pointer" id="activator"><img src="images/icon_user.png" hspace="10" border="0" align="right" id="openD" /></span>
В обоих примерах красным выделен идентификатор, который обрабатывается функцией jQuery при клике, вызывая появление окна авторизации.
-
В раздел BODY ещё добавляем блок: <div id="dialog" title="Авторизация"></div>
-
Внутри этого блока создаем форму для авторизации, в результате должно получиться следующее:
<div id="dialog" title="Авторизация">
<form name="fr" method="post" action="">
<span class="style4"> e-mail</span>:
<input name="login" type="text" size="10"><br>
<span class="style4"> Пароль</span>:
<input name="pass" type="password" size="8"><br>
<input type="submit" name="Submit" value="Войти">
<span class="style4">
<a href="reg1.php" сlass="podval"> Регистрация </a>
</span> <br>
<a href="remss.php" class="podval">Напомнить пароль</a>
</form>
</div>
-
Последнее - добавить скрипт в раздел HEAD:
<script type="text/javascript">
$(function(){
$("#dialog").dialog({
autoOpen: false
});
$("#openD").click(function(){
$("#dialog").dialog("open");
});
});
</script>
-
Сохраните страницу и проверьте ее работу
p.s. Если до этого на Вашей странице уже использовали какие-либо библиотеки jQuery, то внимательно смотрите на то, что за библиотки уже подключе и можно ли обойтись ими, не подключая новые из скачанного архива. Иначе они между собой иногда конфликтуют, и каая из них "выживет" не известно.
|
|
