Legosp Forum
Shop-Script "Legosp" => Дизайн и шаблоны => Тема начата: pavelsmorchkov от Января 17, 2012, 05:19:03 pm
-
кто знает как прикрутить
<nav>
<ul>
<li id="login">
<a id="login-trigger" href="#">Войти <span>▼</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]
как настроить чтобы регистрировала форма эта?
-
источник http:/www.rudebox.org.ua/create-drop-down-form-authorization/
-
там всё написано. >:( просто взять и попробовать, хотя бы на локальном. js положить в core/js/js_scripts.js в самый конец.
сделайте/выведите сие в шаблоне, а с импутами вам помогут.
-
в шаблон вывел всё!) js положил вот ток с imputми хз(
-
а как быть с остальными опциями, после "авторизации", с "История заказов" и "Выйти"? Где они будут отображаться?
-
точно не подумал
-
на сайте vo-stok.com.ua пример реализации
-
да я смотрю у вас многие фичи и частично диз. с этого сайта. что ж с вами не поделились и этим улутшательством??
ладно:
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>▼</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>▼</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('▲')
else $(this).find('span').html('▼')
})
});[/spoiler]
в css/css_them/stylesheet/stylesheet.css добавить(особо не ковырял, но что то добавил):
[spoiler]/*------------autorisation---------*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
background: #eee;
border-bottom: 1px solid #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
nav li {
float: left;
}
nav #login {
border-right: 1px solid #ddd;
-moz-box-shadow: 1px 0 0 #fff;
-webkit-box-shadow: 1px 0 0 #fff;
box-shadow: 1px 0 0 #fff;
}
nav #login-trigger,
nav #signup a {
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 #fff;
}
nav #signup a {
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
nav #login-trigger {
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
background: #fff;
}
nav #login-content {
display: none;
position: absolute;
top: 24px;
right: 0;
z-index: 999;
background: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#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-image: linear-gradient(top, #fff, #eee);
padding: 15px;
-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-moz-border-radius: 3px 0 3px 3px;
-webkit-border-radius: 3px 0 3px 3px;
border-radius: 3px 0 3px 3px;
}
nav li #login-content {
right: 0;
width: 250px;
}
/*--------------------*/
#inputs input {
background: #f1f1f1;
padding: 6px 5px;
margin: 0 0 5px 0;
width: 235px;
border: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 1px #ccc inset;
-webkit-box-shadow: 0 1px 1px #ccc inset;
box-shadow: 0 1px 1px #ccc inset;
}
#inputs input:focus {
background-color: #fff;
border-color: #e8c291;
outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #e8c291 inset;
box-shadow: 0 0 0 1px #e8c291 inset;
}
/*--------------------*/
#login #actions {
margin: 10px 0 0 0;
}
#login #submit {
background-color: #d14545;
background-image: -webkit-gradient(linear, left top, left bottom, from(#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-image: linear-gradient(top, #e97171, #d14545);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid #7e1515;
float: left;
height: 30px;
padding: 0;
width: 100px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #fff;
}
a#submit {
text-align:center;
margin-top:5px;
padding: 5px 10px!important;
text-decoration:none;
height: 20px!important;
width: 80px!important;
}
#login #submit:hover,
#login #submit:focus {
background-color: #e97171;
background-image: -webkit-gradient(linear, left top, left bottom, from(#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-image: linear-gradient(top, #d14545, #e97171);
}
#login #submit:active {
outline: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#login #submit::-moz-focus-inner {
border: none;
}
#login label {
float: right;
line-height: 30px;
}
#login label input {
position: relative;
top: 2px;
right: 2px;
}
[/spoiler]
зы// но в ие смотриться конечно дико :o
ps/ps/ можно добавить костыли для ие, в head.tpl.html:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
-
что эт токое то ▼??? при нажатии на кнопку появляется Войти и ▼
-
геометрические фигуры (http://translate.google.com.ua/translate?hl=ru&sl=en&u=http://en.wikipedia.org/wiki/Geometric_Shapes&ei=98cVT5v_J-_24QTP_oj3BA&sa=X&oi=translate&ct=result&resnum=1&ved=0CCwQ7gEwAA&prev=/search%3Fq%3D%2526%2523x25BC%253B%26hl%3Dru%26client%3Dfirefox%26hs%3DYru%26rls%3Dorg.mozilla:ru:official%26prmd%3Dimvns)
-
странно... но почему то они в виде текста а не фигуры
-
почем то регистрация никак не клеится под div7(( вылезает вниз
[вложение удалено администратором]
-
странно... но почему то они в виде текста а не фигуры
тут посмотри (http://www.fileformat.info/info/unicode/char/25bc/index.htm) для своей кодировки.
-
почем то регистрация никак не клеится под div7(( вылезает вниз
задай ширину для дива в котором лежит.
-
шарину задал а регистрация не перебросилась
-
ещё воросик как <span>▼</span> поставить на место? он почему то под словом войти.. а не рядом
-
мне это всё напоминает "морской бой". Р10 - мимо, Р7 - ранил, Е7 - ранил, С7 - ура!!! заработало!
игра в слепую..
сделай по аналогии <div class="languages f-left">, возьми тот же стиль (float:left).
или отслеживай css и поведение firebug-ом(в firefoxe), или в опере. может какому то стилю элемента нужен приоритет(!important).
ещё воросик как <span>▼</span> поставить на место?
да, смотри исходник.
зы/ хотя если он не отображает фигуру(не воспользовался подсказкой (http://www.fileformat.info/info/unicode/char/25bc/index.htm)), можешь не ставить. или задать свой background img.
-
фигуру отображает нормально
-
вот что получилось) vrnparfum.ru) только вот так и не получилось выделение при наведении сделать как в исходнике
-
ок)
-
Если кому нужно за ~$5 сброшу свою.
-
я свою хочу доделать)
-
доделать...))
нужно для этого хоть что то почитать по ксс и штмл.
в css для тега nav li {...}, добавь : visibility: visible;clear: none!important;
-
всё качаю литературу)))
-
не не помогло( но всё равно спасибо)
-
не не помогло( но всё равно спасибо)
я не вижу в css для nav li {clear: none!important;...}
добавь и почисть core/cache.
-
да есть там всё) почистил кэш не помогло(
-
а де ж ты float:left потерял??
можешь убрать clear: none !important; и верни float:left для nav li
-
если float:left; поставить то расползается всё
-
Сделай через table. Дaльшe двигaй ee кaк угодно.
-
мля надоела эта игра в угадайку, уже специально установил версию скрипта с темой Аэроинфо.
короче, возми <form ...>...</form> оберни/помести в <div style="position:relative;"></div>
в css должно быть так: nav li {float: left; clear:none!important; }
-
не получился фокус... ну да ладно пофиг пусть так и будет(((
-
может только с чем конфликтует? когда оригинал прикручивал то всё нормально было но не работало(((
-
а что не получилось то..
и ещё : .div7 {...padding-top: 2px;} убери.
а для отображения стрелок, и в js и в коде,: ▲ и ▼ а то bbcode амперсанд меняет.
зы/ а ты про ИЕ, "костыли" на первой странице этой темы.
-
пипец какой то ниче не помогает(((
-
заметил прикол: на жк мониторе не видно почти выделение при наведении а на LED видно)))
-
nictboom костыли для ИЕ прописал ток вот фигуры все равно внизу слова висят((( в опере и хроме полёт нормальный)
-
А как сделать что бы выпадающий блок авторизации(там где вводить данные) был поверх всего?
Я просто сместил строку с "Главная------Контакты" вниз, а строку "Авторизация\Поиск" вверх.
И теперь когда нажимаю на авторизацию, то у меня часть этого выпадающего блока закрывает строка "Главная------Контакты"