5.Выезжающая форма входа

[hayeli 0]

простая форма входа:

1.

заходим в templates/vamshop/index.html

в самом верху сразу под

{config_load file="$language/lang_$language.conf" section="index"}

вставляем

<!-- Контейнер -->

{literal}

<script type="text/javascript">

jQuery(document).ready(function(){

jQuery('#lk').click(function(){

jQuery('#login-form').animate({top: '+=346px'}, 700); //увеличиваем значение на 346px получаем что форма выехала на 46px сверху браузера за 700мс

return false; //запрещаем переход по ссылке

});

jQuery('#login-form .close').click(function(){jQuery('#login-form').animate({top: '-=346px'}, 500);return false;});

})

</script>

{/literal}

<div id="login-form" style="top: -300px; ">

<div class="top"></div>

<div class="center">

<a href="#" class="close" title="Закрыть"></a>

<form id="loginForm" method="post" action="{$smarty.const.HTTP_SERVER}{$smarty.const.DIR_WS_CATALOG}login.php?action=process">

<label title="Электронная почта">Почта <input class="txt" type="text" name="email_address" id="users_login" value=""/></label>

<label title="Пароль">Пароль <input class="txt" type="text" name="password" id="users_password" value=""/></label>

<div>

<a href="/create_account.php" title="Регистрация">Регистрация?</a>

</div>

<div>

<a href="/password_double_opt.php" title="Восстановить пароль">Восстановить пароль</a>

</div>

<div>

<input type="submit" value="Войти"/>

</div>

</form>

</div>

<div class="bottom"></div>

</div>

2.

<li{$6}><a href="#" title="Личный кабинет" id="lk"><span>Вход</span></a></li>

3.

Стили: надо поиграть со стилями я не могу править стили, если кто разберется постучитесь мне в личку)))

#lk {background: url(images/lk-key.gif) no-repeat left 5px; padding: 0 0 0 21px; font-weight: bold; text-decoration: none; color: #000;}

#lkab {background: url(images/lk-chel.gif) no-repeat 5px 2px; padding: 0 0 0 21px; font-weight: bold; text-decoration: none; color: #000;}

#lk span, #topmenu #right #lkab span {border-bottom: 1px dashed #000; margin-right: 20px;}

#lk:hover span, #lkab:hover span {border: none;}

#whyreg {padding-left: 18px; background: url(images/bg-dash2.gif) no-repeat 1px 7px;}

#login-form {position: absolute; width: 206px; z-index: 150; right: 27px; top: -300px; color: #fff; font: 11px/11px Tahoma;}

#login-form a {color: #fff;}

#login-form .top {height: 5px; font: 1px/1px Arial; background: url(images/bg-login-form.png) no-repeat left top;}

#login-form .center {background: url(images/bg-login-form.png) repeat-y center top; padding: 10px 30px; text-align: right;}

#login-form .center .close {position: absolute; display: block; width: 11px; height: 11px; top: 5px; right: 5px; background: url(images/close.gif); z-index: 15;}

#login-form .center p {text-align: left; padding: 3px 0;}

#login-form .bottom {height: 5px; font: 1px/1px Arial; background: url(images/bg-login-form.png) no-repeat right top;}

[support 447]

Спасибо, перенёс в раздел Готовые решения - Шаблоны.

[Bomond 2]

hayeli

ой как не красиво подписываться под чужими решениями

http://www.lenal.com...ya-vamshop.html

[-Inna- 0]

если в готовые решения то наверно

action="http://ВАШ САЙТ/login.php?action=process"

лучше заменить на

action="{$smarty.const.HTTP_SERVER}{$smarty.const.DIR_WS_CATALOG}login.php?action=process"

[support 447]

Поправил

[hayeli 0]

Bomond

там у них коды не правильно были прописаны, я поправил и выложил для всех!

[Liebbe.ru 0]

Залейте пожалуйста папку с картинки, уберите {/if} пишет ошибку.

2.

<li{$6}><a href="#" title="Личный кабинет" id="lk"><span>Вход</span></a></li>

{/if}

[hayeli 0]

исправил, вечером залью картинки

images.zip

[eugenem 11]

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

[hayeli 0]

по моему метку лучше пускай на месте остаётся.

[runways 0]

хорошо было бы, чтобы вводимый пароль еще заменялся *** и была опция запомнить меня, может кто-нибудь знает как это реализовать?

[eugenem 11]

по моему метку лучше пускай на месте остаётся.

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

Для runways: Про подсказки в форме я писал в своем блоге - http://www.molodezky.pp.ua/2010/10/08/podskazki-v-pole-vvoda-v-boksax-logina-i-poiska-vamshop/

[runways 0]

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

Для runways: Про подсказки в форме я писал в своем блоге - http://www.molodezky...poiska-vamshop/

Спасибо, попробую применить. А есть готовое решение с меткой бокса для выезжающей формы?