Web-мастер
 


Здравствуйте,
гость !

   Логин
   Пароль
Регистрация 



Наш вопрос:

Как узнали об этом сайте?
Из рекламы
Случайно наткнулся
Не помню
Из поисковой системы
Узнал от друга

Создаем всплывающие окна авторизации

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

Теперь подробно рассмотрим последовательность создания всплывающих окон, и в частности, окна авторизации. Тут используется технология jQuery, как и во многих других случаях подобного рода.

  1. Нужно скачать архив с папками js и css в которых находятся стили и библиотеки jQuery.
  2. Распаковать архив в папку где будет находится ваша страница.
  3. Подключить библиотеку 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>

  1. в разделе 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 при клике, вызывая появление окна авторизации.

  1. В раздел BODY ещё добавляем блок: <div id="dialog" title="Авторизация"></div>
  2. Внутри этого блока создаем форму для авторизации, в результате должно получиться следующее:

    <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>
  1. Последнее - добавить скрипт в раздел HEAD:

    <script type="text/javascript">
    $(function(){
    $("#dialog").dialog({
    autoOpen: false
    });
    $("#openD").click(function(){
    $("#dialog").dialog("open");
    });
    });
    </script>
  1. Сохраните страницу и проверьте ее работу

p.s. Если до этого на Вашей странице уже использовали какие-либо библиотеки jQuery, то внимательно смотрите на то, что за библиотки уже подключе и можно ли обойтись ими, не подключая новые из скачанного архива. Иначе они между собой иногда конфликтуют, и каая из них "выживет" не известно.

© AlSoft   2012 г. Web-дизайн и создание сайтов.