Автор Тема: выпадающая форма регистрации  (Прочитано 31766 раз)

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
выпадающая форма регистрации
« : Января 17, 2012, 05:19:03 pm »
кто знает как прикрутить <nav>
<ul>
<li id="login">
<a id="login-trigger" href="#">Войти <span>&#x25BC;</span>
</a>
<div id="login-content">
<form>
<fieldset id="inputs">
<input id="username" type="email" name="Email" placeholder="Ваш email адрес" required>
<input id="password" type="password" name="Password" placeholder="Пароль" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Войти">
<label><input type="checkbox" checked="checked"> Запомнить меня</label>
</fieldset>
</form>
</div>
</li>
<li id="signup">
<a href="">Регистрация</a>
</li>
</ul>
</nav>

js[spoiler]$(document).ready(function(){
$('#login-trigger').click(function(){
   $(this).next('#login-content').slideToggle();
   $(this).toggleClass('active');

   if ($(this).hasClass('active')) $(this).find('span').html('')
      else $(this).find('span').html('')
   })
});[/spoiler]
как настроить чтобы регистрировала форма эта?

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: выпадающая форма регистрации
« Ответ #1 : Января 17, 2012, 05:20:56 pm »
источник http:/www.rudebox.org.ua/create-drop-down-form-authorization/

nictboom

  • Гость
Re: выпадающая форма регистрации
« Ответ #2 : Января 17, 2012, 05:29:36 pm »
там всё написано. >:( просто взять и попробовать, хотя бы на локальном. js положить в core/js/js_scripts.js в самый конец.
сделайте/выведите сие в шаблоне, а с импутами вам помогут.

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: выпадающая форма регистрации
« Ответ #3 : Января 17, 2012, 05:31:45 pm »
в шаблон вывел всё!) js положил вот ток с imputми хз(

nictboom

  • Гость
Re: выпадающая форма регистрации
« Ответ #4 : Января 17, 2012, 05:49:19 pm »
а как быть с остальными опциями, после "авторизации", с "История заказов" и "Выйти"? Где они будут отображаться?

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: выпадающая форма регистрации
« Ответ #5 : Января 17, 2012, 05:52:21 pm »
точно не подумал

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: выпадающая форма регистрации
« Ответ #6 : Января 17, 2012, 06:23:00 pm »
на сайте vo-stok.com.ua пример реализации

nictboom

  • Гость
Re: выпадающая форма регистрации
« Ответ #7 : Января 17, 2012, 07:23:48 pm »
да я смотрю у вас многие фичи и частично диз.  с этого сайта. что ж с вами не поделились и этим улутшательством??
ладно:
cust_login_info.tpl.html
[spoiler]<form action="index.php" name="customer_login_form" method=post onSubmit="return validate_loginfo(this);">
<
input type=hidden name="cust_login" value="yes">
<
nav>
	
<
ul>
	
	
<
li id="login">
{if (
$smarty.session.cust_login=='yes' || $smarty.session.cust_login_openID=='yes')}
	
	
	
<
a id="login-trigger" href="#">Мой кабинет <span>&#38;#x25BC;</span></a>
	
	
	
<
div id="login-content">
	
	
	
{
$smarty.const.CUST_WELCOME} {$smarty.session.userinf.cust_firstname}!<br><br>
                        {if !
$smarty.get.order_history}<a href='./index.php?order_history=1'>{$smarty.const.ORDERS_HISTORY}</a>
                        {else}
                          <
b>{$smarty.const.ORDERS_HISTORY}</b>
                        {/if}
                       
	
	
	
<
br><a href="index.php?cust_logout=yes" id="submit">{$smarty.const.CUST_LOGOUT}</a>
{else}<
a id="login-trigger" href="#">Войти <span>&#38;#x25BC;</span></a>
	
	
	
<
div id="login-content">
	
	
	
{if 
$cust_error_password ne NULL}
	
	
	
	
{if 
$cust_firstname ne NULL} {$cust_firstname}, {/if}
	
	
	
	
{
$smarty.const.ERROR_CUST_PASSWORD}
	
	
	
{else}
	
	
	
	
{if 
$cust_no_such_email ne NULL}
	
	
	
	
	
{
$smarty.const.ERROR_NO_SUCH_EMAIL}
	
	
	
	
{/if}
	
	
	
{/if}
	
<
fieldset id="inputs">
	
	
{if 
$cust_error_password ne NULL && $cust_email ne NULL}
	
	
	
<
input type=hidden name=cust_email value="{$cust_email}/>
	
	
{else}
	
	
<
input id="username" type="text" name="cust_email" placeholder="Ваш email адрес" required />
	
	
{/if}
	
	
<
input id="password" type=password name=cust_password placeholder="Пароль" required />
	
</
fieldset>
	
<
fieldset id="actions">
	
	
<
input type="submit" id="submit" value="Войти" />
	
</
fieldset>
	
	
	
</
div>
{/if}
	
	
</
li>
	
	
<
li id="signup">
	
	
	
<
a id="login_box" href="index.php?cust_register=yes">Регистрация</a>
	
	
</
li>
	
</
ul>
</
nav>
</
form>
[/spoiler]
вывести можно и так при желании, параметрами можно поиграть:  <div style="position:absolute; left:450px; top:5px;">{include file="cust_login_info.tpl.html"}</div>соответственно в index.tpl.html найти блок авторизации и закоментировать {*coдержимое*}.
в core/js/js_script.js в конец добавить:
[spoiler]$(document).ready(function(){
$(
'#login-trigger').click(function(){
	
$(
this).next('#login-content').slideToggle();
	
$(
this).toggleClass('active');
	
$(
"a[id=login-trigger]").attr('href''javascript:void(null)');//от переадрессации на url=./#

	
if ($(
this).hasClass('active')) $(this).find('span').html('&#38;#x25B2;')
	
	
else $(
this).find('span').html('&#38;#x25BC;')
	
})
});
[/spoiler]
в css/css_them/stylesheet/stylesheet.css добавить(особо не ковырял, но что то добавил):
[spoiler]/*------------autorisation---------*/
fieldset {
    
border0;
    
margin0;
    
padding0;
}

nav ul {
  
margin0;
  
padding0;
  list-
stylenone;
  
positionrelative;
  
floatright;
  
background#eee;
  
border-bottom1px solid #fff;
  
-moz-border-radius3px;
  -
webkit-border-radius3px;
  
border-radius3px;
}

nav li {
  
floatleft;
}

nav #login {
  
border-right1px solid #ddd;
  
-moz-box-shadow1px 0 0 #fff;
  
-webkit-box-shadow1px 0 0 #fff;
  
box-shadow1px 0 0 #fff;
}

nav #login-trigger,
nav #signup a {
  
displayinline-block;
  *
displayinline;
  *
zoom1;
  
height25px;
  
line-height25px;
  
font-weightbold;
  
padding0 8px;
  
text-decorationnone;
  
color#444;
  
text-shadow0 1px 0 #fff;
}

nav #signup a {
  
-moz-border-radius0 3px 3px 0;
  -
webkit-border-radius0 3px 3px 0;
  
border-radius0 3px 3px 0;
}

nav #login-trigger {
  
-moz-border-radius3px 0 0 3px;
  -
webkit-border-radius3px 0 0 3px;
  
border-radius3px 0 0 3px;
}

nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
  
background#fff;
}

nav #login-content {
  
displaynone;
  
positionabsolute;
  
top24px;
  
right0;
  
z-index999;
  
background#fff;
  
background-image: -webkit-gradient(linearleft topleft bottomfrom(#fff), to(#eee));
  
background-image: -webkit-linear-gradient(top#fff, #eee);
  
background-image: -moz-linear-gradient(top#fff, #eee);
  
background-image: -ms-linear-gradient(top#fff, #eee);
  
background-image: -o-linear-gradient(top#fff, #eee);
  
background-imagelinear-gradient(top#fff, #eee);
  
padding15px;
  -
moz-box-shadow0 2px 2px -1px rgba(0,0,0,.9);
  -
webkit-box-shadow0 2px 2px -1px rgba(0,0,0,.9);
  
box-shadow0 2px 2px -1px rgba(0,0,0,.9);
  -
moz-border-radius3px 0 3px 3px;
  -
webkit-border-radius3px 0 3px 3px;
  
border-radius3px 0 3px 3px;
}

nav li #login-content {
  
right0;
  
width250px;
}

/*--------------------*/

#inputs input {
  
background#f1f1f1;
  
padding6px 5px;
  
margin0 0 5px 0;
  
width235px;
  
border1px solid #ccc;
  
-moz-border-radius3px;
  -
webkit-border-radius3px;
  
border-radius3px;
  -
moz-box-shadow0 1px 1px #ccc inset;
  
-webkit-box-shadow0 1px 1px #ccc inset;
  
box-shadow0 1px 1px #ccc inset;
}

#inputs input:focus {
  
background-color#fff;
  
border-color#e8c291;
  
outlinenone;
  -
moz-box-shadow0 0 0 1px #e8c291 inset;
  
-webkit-box-shadow0 0 0 1px #e8c291 inset;
  
box-shadow0 0 0 1px #e8c291 inset;
}

/*--------------------*/

#login #actions {
  
margin10px 0 0 0;
}

#login #submit {
  
background-color#d14545;
  
background-image: -webkit-gradient(linearleft topleft bottomfrom(#e97171), to(#d14545));
  
background-image: -webkit-linear-gradient(top#e97171, #d14545);
  
background-image: -moz-linear-gradient(top#e97171, #d14545);
  
background-image: -ms-linear-gradient(top#e97171, #d14545);
  
background-image: -o-linear-gradient(top#e97171, #d14545);
  
background-imagelinear-gradient(top#e97171, #d14545);
  
-moz-border-radius3px;
  -
webkit-border-radius3px;
  
border-radius3px;
  
text-shadow0 1px 0 rgba(0,0,0,.5);
  -
moz-box-shadow0 0 1px rgba(0000.3), 0 1px 0 rgba(2552552550.3inset;
  -
webkit-box-shadow0 0 1px rgba(0000.3), 0 1px 0 rgba(2552552550.3inset;
  
box-shadow0 0 1px rgba(0000.3), 0 1px 0 rgba(2552552550.3inset;
  
border1px solid #7e1515;
  
floatleft;
  
height30px;
  
padding0;
  
width100px;
  
cursorpointer;
  
fontbold 14px ArialHelvetica;
  
color#fff;
}
a#submit {
  
text-align:center;
  
margin-top:5px;
  
padding5px 10px!important;
  
text-decoration:none;
  
height20px!important;
  
width80px!important;
}

#login #submit:hover,
#login #submit:focus {
  
background-color#e97171;
  
background-image: -webkit-gradient(linearleft topleft bottomfrom(#d14545), to(#e97171));
  
background-image: -webkit-linear-gradient(top#d14545, #e97171);
  
background-image: -moz-linear-gradient(top#d14545, #e97171);
  
background-image: -ms-linear-gradient(top#d14545, #e97171);
  
background-image: -o-linear-gradient(top#d14545, #e97171);
  
background-imagelinear-gradient(top#d14545, #e97171);
}

#login #submit:active {
  
outlinenone;
  -
moz-box-shadow0 1px 4px rgba(0000.5inset;
  -
webkit-box-shadow0 1px 4px rgba(0000.5inset;
  
box-shadow0 1px 4px rgba(0000.5inset;
}

#login #submit::-moz-focus-inner {
  
bordernone;
}

#login label {
  
floatright;
  
line-height30px;
}

#login label input {
  
positionrelative;
  
top2px;
  
right2px;
}

[/spoiler]

зы//  но в ие смотриться конечно дико  :o

ps/ps/ можно добавить костыли для ие, в head.tpl.html:
<!--[if lt IE 9]>
   <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
« Последнее редактирование: Января 17, 2012, 07:38:33 pm от nictboom »

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: выпадающая форма регистрации
« Ответ #8 : Января 17, 2012, 07:58:31 pm »
что эт токое то &#x25BC??? при нажатии на кнопку появляется Войти и &#x25BC

nictboom

  • Гость

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: выпадающая форма регистрации
« Ответ #10 : Января 17, 2012, 10:59:41 pm »
странно... но почему то они в виде текста а не фигуры

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: выпадающая форма регистрации
« Ответ #11 : Января 17, 2012, 11:05:49 pm »
почем то регистрация никак не клеится под div7(( вылезает вниз

[вложение удалено администратором]

nictboom

  • Гость
Re: выпадающая форма регистрации
« Ответ #12 : Января 17, 2012, 11:51:30 pm »
странно... но почему то они в виде текста а не фигуры
тут посмотри для своей кодировки.

nictboom

  • Гость
Re: выпадающая форма регистрации
« Ответ #13 : Января 17, 2012, 11:54:06 pm »
почем то регистрация никак не клеится под div7(( вылезает вниз
задай ширину для дива в котором лежит.

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: выпадающая форма регистрации
« Ответ #14 : Января 18, 2012, 01:09:21 pm »
шарину задал а регистрация не перебросилась