Появляющаяся форма входа ucoz

3950 просмотров Alan_Writer 22.04.2014

Появляющаяся форма входа ucoz. Всем привет, сегодня мы будем создавать небольшую кнопку вход, при нажати на которую будет появляться форма входа uСoz, данное решение подойдёт тем сайтам которые предпочитают скрыть от глаз пользователей форму входа, но давайте для начало посмотрим на Demo и поймём о чём идёт речь...

Установка формы входа

1. Сначала скачайте архив и залейте папки js и img со всем их содержимым в файловый менеджер.

2. Так как в системе uCoz уже установлена библиотека jQuery, нам следует установить в конец вашей страницы перед тегом </body> следующий js код, весом всего 537 байт:

Код

3. Теперь нам следует разместить html-код на вашей страницы, для этого заходим в: Админ панель => Дизайн => Управление дизайном => Пользователи => Форма входа пользователей. Удаляем старый код и устанавливаем следующий:

Код

<div id="loginForm">
<div class="vxod_name">Ваш логин:</div><input class="login_pole" type="text" name="user" value="" size="20" maxlength="50"/>
<div class="vxod_name">Ваш пароль:</div><input class="login_pole" type="password" name="password" size="20" maxlength="15"/>
<div id="vxod_reg">
<a href="$REMINDER_LINK$">Забыл пароль</a>
<a href="$REGISTER_LINK$">Регистрация</a>
</div>
<div id="cell_knopkav">
<span class="right"><input class="south" title="Сохранить пароль при входе"id="rem$PAGE_ID$" type="checkbox" name="rem" value="1" checked="checked"/><label for="rem$PAGE_ID$"></label></span>
<input class="knopka_vxoda" name="sbm" type="submit" value="Войти"/></div>
</div>

4. Теперь нам следует установить кнопку входа, с содержанием формы входа в нужное место вашей страницы, обычно её размещают вверху страницы:

Код

<div id="loginContainer">
<a href="#" id="loginButton"><span>Вход</span><em></em></a>
<div style="clear:both"></div>
<div id="loginBox">
<?if($LOGIN_FORM$)?>$LOGIN_FORM$<?endif?>
</div>
</div>

5. Наша форма входа, почти готова, всё что нам осталось сделать, так это прописать нужные css стили в <head>:

Код

Вуаля, наша форма входа готова, всё просто и доступно.

Теги: исчезающая, форма входа, blue, появляющаяся, JavaScript, ucoz