Пособие: Красивая и удобная выпадающая панель для входа/регистрации

[@Kaaboeld]

Зачем две Одинаковые формы для логина и регистрации в вашей панели? Объедините их.

[@akzhan]

Это лишь пример. ;)

Хотя автор не читает Хабр, самые значимые комментарии я переведу и отправлю в блог к автору, если Вы этого не сделаете сами.

[@Kaaboeld]

:) ну раз так, не читает, то конечно обсуждать не очень удобно, да…
В качестве доп комментариев: «плохо» дублировать id и class названия, не имеет смысла, так же и использования «style etc...» можно было бы обойтись более компактным кодом чем в приведенном примере.

[@mecommayou]

«Помните мою выпадающую панель» — показалось что ты и есть автор.

[@akzhan]

Статья является переводом, значок соответствующий. Текст соответственно авторский.

Но тем не менее, комментарии я достаточно часто потом обьединяю и пишу в оригинальный блог-пост.

[@mecommayou]

Для тестирования в IE8 посоветую www.my-debugbar.com/wiki/IETester/HomePage
Не увидел лицензии на панельку, а так здорово.

[@lacki]

The CSS, XHTML and design is released under Creative Common License 3.0

[@akzhan]

Мне тоже понравилось, только хочу использовать не для входа и регистрации, а для разных «редко нужных вещей».

[@akzhan]

Без малейшего понятия. Логически рассуждая, будет кнопка выхода и сервисы, доступные после входа, и надпись Hello Guest будет заменена на Hello [% somebody | html %].

[@FIT]

автору спасибо. Отличная статья

[@dohlik]

Background в демо-страничке убил мои глаза.

[@WebMonet]

Блин, уже если делать то так:
Форма — одна: логин/пароль. Если чел ввел правильную пару — то обычный вход. Если он ввел несуществующий логин — вероятнее всего он хочет зарегистрироваться. Если логин существует, но пароль не подходит — значит он забыл пароль — предложить переввести или восстановить.

[@ipod]

То есть, чтобы зарегистрироваться мне надо вбить неправильные логин и пароль? Не вполне очевидно и не совсем логично. Может у меня капслок включен, а может раскладка не та…

[@WebMonet]

Т.е. если тебя на сайте нет — то предложить зарегиться с таким именем и паролем. непонятки с капслоком и раскладкой проверяются очень легко.

[@kostin]

Нельзя так морочить пользователя. Даже если ему не придётся догадываться, то инструкция в духе «Если вы ещё не зарегистрированы, то всё равно введите в поле «Имя» несуществующий логин, который вы хотели бы получить на нашем сайте» — вряд ли обрадует пользователя (а неопытного — точно запутает).

[@Hatifnatt]

Типа этого:

Извините, Вы не можете использовать указанный пароль. Такой пароль уже использует пользователь Misha. Пожалуйста, придумайте другой пароль.

© bash.org.ru

[@homolibere]

Ой какая удобная штуко!
Попробую скрестить с gShell и сделать себе консоль на сайт.
Вместо формы логина пароля будет gShell.

[@sopov]

Красивая штучка )) автор — молодец!

[@punch]

Шикарное решение.

[@andrei202]

После окончания выезжания панели следует передавать фокус на Username.

[@neochief]

После окончания выезжания панели следует покрывать все окно fixed позиционированным дивом с 1% прозрачнуостью, при клике на который (читай, клик куда угодно), панель бы закрывалась.

[@xaja]

На скрипт тратится минута — ровно столько чтобы скопипастить стандартную джекверевую фичу и поменять на нужные классы.

[@alekciy]

Интересно, почему автор отказался от Mootools в пользу другого фреймворка…

[@Never]

Форма действительно удобна, но вот только использование капчи при авторизации или регистрации при таком подходе вряд ли получиться. Слишком большая, необоснованная нагрузка на сервер.

[@lightcyber]

Лично мне это решение напомнило: vremenno.net/design/creating-nice-forms/

[@aps]

А мне вот это: codeigniter.com/user_guide/

[@akamuza]

но мне кажется у автора всё таки как-то изящней получилось)

[@aps]

мне кажется здесь первична идея вываливающейся сверху панели. Что в нее заложено — это уже вторично. Может я и неправ.

[@Creadome]

А почему бы через position: fixed; не «привязать» форму к верхней границе окна?

[@onznaet]

м… я чегото не пойму. Автор узнал о slideUp и slideDown в JQuery и решил об этом написать??

[@akamuza]

подумайте о других…
это труд достойный уважения. автор не только написал простой «slideUp и slideDown» — автор еще и облёк это в красивую форму и запостил сюда. а ведь для кого-то это может оказаться полезным.

мне пригодилось.
спасибо.

[@onznaet]

Ок. Понял. Отстал. Если будет полезно, то можно юзать за место этих двух методов один — slideToggle (если его будет достаточно конечно):

$("#open-close").click(function(){
$(«div#panel»).slideToggle(«slow»);
});

[@ESVSerge]

Мне идея понравилась! НАписать такое на jquery — не так сложно…
Но идея — классная… Надо замутить такое… Даже знаю где :)

[@huksley]

Что-то мне напоминает… Может быть codeigniter.com?

[@baltazorbest]

впринципе ничего нового, есть на сайте jquery как такое делать (там написано про текст)

[@MaloWatt]

В IE8 никаких проблем

[@xolvo]

а чтобы к примеру не переходить на ссылку c этой штуковиной #, при клике на handler, можно сделать так

$('.some').click(function() {… return false;});

пы.сы. хотя мож это лишнее ;)

[@namata]

Согласен. «a» не предназначен для запуска функций.

[@Quiz]

Где-то я уже видел такую панель.
Кажется, в платных шаблонах от YOOtheme.

[@zdec]

На сайте «Техносилы» используется подобный приём с одной лишь разницей — кнопка раскрытия меню остаётся всегда на месте. Эта маленькая деталь очень приятна в плане юзабилити. Пользователю не надо двигать мышкой, чтобы вернуть страницу сайта в первоначальное состояние, без меню.

Мелочь, а приятно.

[@namata]

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

[@VDG]

видел такое. не понравилось. ИМХО лишние телодвижения.

[@Freem]

для тех кому понравилась идея
— ajax'ом выполнять вход/авторизацию/регистраци
— после входа, за_fixed_ировать панельку сверху в пределах 50-100px, например с минимальной информацией. Логин, ссылка на профиль/выход/хелп, кармой и рейтингом. При колике на «Подробно», панелька выезжает еще на 200-300px вниз, с более исчерпывающей информацией. Опрокте, Фак, Топ 10 топиков, коментариев и т.д. по вкусу в зависимости от фантазии…

круче будет(с)

[@Slon]

Если открыть панельку, потом проскролить страницу слегка вниз и закрыть панель, то страница дёрнется вверх. Не смертельно, но выглядит слегка неуютно, что ли.

[@Teutonick]

Спасибо!!! Ставлю себе!
PS в IE8 работает как часы! Потестил ;)