» » Оформляем панель авторизации в DLE

Оформляем панель авторизации в DLE

27.12
20
31 852
Оформляем панель авторизации в DLE


Недавно ко мне обратились с просьбой сделать всплывающую панель авторизации без использования jQuery библиотеки, т.к. не требовалось красивых спецэффектов.
Покопав немного интернет я нашёл довольно простое и в то же время функциональное решение. Для людей хорошо знающих javascript эта статья скорее всего не будет интересна, а вот начинающим вебмастерам думаю вполне пригодится.

То что у меня получилось можно посмотреть на демосайте (шаблон tm-sarato2, логин и пароль для входа: demo)

Итак задача:
Сделать на сайте всплывающую поверх контента форму входа на сайт и логинпанель.

Для начала в style.css нам нужно задать оформление нашей логинпанели, пусть она будет появляться примерно по центру сайта в верхней его части. Присвоим для id loginpanel следующий стиль:
CSS:
#loginpanel {
    position: absolute;
    top: 15%;
    left: 30%;      
    width:400px;    
    display: none;
      z-index: 10;
    background: #fff;
    border: solid 3px #ccc;
    padding: 5px;
}

Я специально не стал красиво оформлять панель, что бы не отвлекать от самой сути решения.

Теперь нам надо прописать ссылки:
- для неавторизованного пользователя, что бы он видел только ссылку входа на сайт;
- для авторизованного - ссылку на панель управления.
и сюда же добавим небольшой js код который будет "показывать" нашу логинпанель, путём добавления стиля к #loginpanel.
HTML:
[group=5]
<a href="#" onclick="document.getElementById('loginpanel').style.display='block'; return false;" >войти на сайт</a>
[/group]
[not-group=5]
<a href="" onclick="document.getElementById('loginpanel').style.display='block'; return false;" >панель управления</a>
[/not-group]
<div id="loginpanel">
{login}
</div>


Теперь при нажатии на ссылку мы видим нашу логинпанель поверх контента и в нужном нам месте, НО остаётся вопрос: как её теперь убрать???? Обновить страничку?
Нет всё гораздо проще:
Открываем login.tpl и пишем в конец блока со ссылками на публикацию новостей, ПМ и т.д., и в конец блока авторизации на сайте в удобном для себя месте данную ссылку:
<a href="" onclick="document.getElementById('loginpanel').style.display='none'; return false;">Закрыть</a>

Вот и всё. Теперь, как обычно, включаем воображение, знания html и css, и оформляем всё это дело так, как хочется.

Пример работы можно видеть на моём демосайте (шаблон tm-sarato2, логин и пароль для входа: demo)

Похожие материалы

Комментарии

legato
legato 1 марта 2010 13:42
СПАСИБО ! Необычная реализация авторизации.Да и сам блог у вас кладесь полезной информации , много нашел для себя полезного.

Но хотелось бы задать вопрос:
Можно как то реализовать возможность быстрой регистрации во всплывающем окне на DLE , с помощью , ну например highslide.
Сделать панель входа и авторизации у меня получилось .
ПафНутиЙ
ПафНутиЙ 1 марта 2010 15:13
Да, я гдето видел модуль "регистрация в один шаг" или "быстрая регистрация пользователя", точно не помню, но суть в том что модуль выводится тегом в любое место страницы, выглядит как 3 поля (логин, почта и пароль) и кнопка "зарегистрироваться". если погуглить - его можно без проблем найти, но я не сторонник таких модулей, т.к. будет куча спамящих ботов на сайте.
ialexdr
ialexdr 7 марта 2010 14:50
Прошу прощения, но вы не сказали, стоит ли убрать с main.tpl тег
{login}
и куда именно надо вставлять хтмл код, приведённый Вами вышше. У меня ничего не отображается как надо.
ПафНутиЙ
ПафНутиЙ 7 марта 2010 16:17
{login}
не нужно убирать, мы же оформляем именно его,
<div id="loginpanel">
{login}
</div>

а вставлять нужно туда, где это будет отображаться.
У меня ничего не отображается как надо.

значит у вас чтото гдето неправильно свёрстано.
amicitia
amicitia 5 июня 2010 22:12
Спасибо!
Только не понятно, как сделать, чтобы по умолчанию блоки были свёрнуты?
ПафНутиЙ
ПафНутиЙ 5 июня 2010 22:14
display: none для всех блоков.
Doc
Doc 15 сентября 2010 21:37
Хм...подскажите, как можно сделать так, чтобы при выскакивании панельки над всеми надписями была видна картинка размером (примерно) 300х120
ПафНутиЙ
ПафНутиЙ 16 сентября 2010 06:59
Добавить эту картинку после
<div id="loginpanel">
например так:
<div class="img300-120"></div>
а в css прописать нужный фон и размеры.
DarkSpirit
DarkSpirit 1 ноября 2010 10:43
что-то у меня совсем не выходит...( no
при нажатии на ссылку входа вылезает только маленькая полосочка...
вот:

больше ничего не выходит... а когда уже авторизован, всё работает нормально!!
Подскажите плиз что делать...
ПафНутиЙ
ПафНутиЙ 1 ноября 2010 12:55
ссылку на сайт для начала дайте.
DarkSpirit
DarkSpirit 1 ноября 2010 14:50
тут был ссылко)
ПафНутиЙ
ПафНутиЙ 1 ноября 2010 17:51
ну для начала нужно поставить нормальный двиг, а не нул от мидтима....
DarkSpirit
DarkSpirit 1 ноября 2010 19:26
решил проблему, дописал немного в login.tpl...
LUCEfeel
LUCEfeel 28 ноября 2010 15:27
Хорошая статейка. Но у меня маленькая запара получилось : всё отображаеться отлично, но все ссылки в этом профиле стали не кликабельны, окошко не закрываеться и не убираеться (если не обновить страницу)) Я что-то нетак сделал?)
ПафНутиЙ
ПафНутиЙ 28 ноября 2010 22:27
с вероятностью в 99% чтото неправильно сделали, может поставили лишни й див, или наоборот. или ещё что, без ссылки трудно сказать...
LUCEfeel
LUCEfeel 28 ноября 2010 23:37
Сейчас пороюсь, возможно что шаблон не правильно адаптирлвал... просто сайт пока на локалке висит) спасибо за подсказку сейчас покопаюсь

вот причины

position: absolute;
top: 130;

меняю позиции, окно кликабельно но не красиво:)
ПафНутиЙ
ПафНутиЙ 29 ноября 2010 17:48
хм.
нужно видеть, так не скажу в чём проблема, но скорее всего что-то с позиционированием в login.tpl. Попробуйте убрать всё форматирование и классы из login.tpl для "чистоты эксперимента"
LUCEfeel
LUCEfeel 29 ноября 2010 19:17
Если не сложно скиньте самый обычный не накрученный файл login.tpl ибо убирал всё что можно, ставил файл из других шаблонов, не помогло. На других шаблонах работает прекрасно, а на этом не хочет хоть убей
ПафНутиЙ
ПафНутиЙ 29 ноября 2010 21:43
Надо смотреть вёрстку, скорее всего там куча косяков.
LUCEfeel
LUCEfeel 30 ноября 2010 17:54
В общем что-бы не парить себе мозг и тебе, выдрал форму логина из joomla и прикрутил к dle, как ни странно но проблем небыло(

Добавить комментарий

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.