УрокPop-up логин при помощи javascript
Обычный логин занимает на сайте много места, а это может быть критично для некоторых сайтах. Так что сегодня я расскажу о том, как можно сделать симпатичный всплывающий логин.
Как это сделать в теории:
- запихиваем блок логина в какой-нибудь div
- скрываем этот div через css (display:none;)
- создаём кнопку/ссылку с надписью ВХОД
- вешаем скрипт, который при нажатии на кнопку ВХОД показывает/прячет div с блоком логина
А теперь к практике:
Напишем в template.php функцию, которая будет показывать анонимам кнопки ВХОД и РЕГИСТРАЦИЯ, а зарегистрированным - ПРОФИЛЬ и ВЫХОД (а заодно и блок логина обернём в div):
function custom_login() { $output = '<div id = "custom_login">'; //оборачиваем наш код в дополнительный div global $user; if ($user->uid) { //если пользователь авторизовался, то //выводим ссылку на его профиль и на выход $output .= l('Профиль','user/'.$user->uid); $output .= l('Выход','logout'); } else { //если на сайте пользователь сидит в качестве анонима, то //выводим ссылку на вход на сайт и на регистрацию, при этом обернув //блок логина в дополнительный div $output .= l('Вход','user', array('attributes' => array('class' => 'login'))); $output .= l('Регистрация','user/register'); //функция module_invoke позволяет "выдирать" любую часть любого модуля $block = module_invoke('user', 'block', 'view', 0); $output .= '<div class = "login_block">'. $block['content'] .'</div>'; } $output .= '</div>'; return $output; }
Далее эту функцию вставляем в нужное место в page.tpl.php:
print custom_login();
Далее создаём пустой файл с расширением .js и пишем туда функцию, которая будет показывать и прятать блок логина при нажатии на кнопку ВХОД:
$(document).ready(function() { $('#custom_login a.login').click(function() { $('#custom_login .login_block').slideToggle(200); // return false для того, чтобы при клике на ВХОД // пользователь не перешёл на новую страницу return false; }); });
Кстати, если вы обратили внимание - ссылка ВХОД хоть и просто открывает блок входа без загрузки страницы, но ведёт всё равно на страницу /user (страницу логина). Это сделано для того, чтобы пользователи, не имеющие поддержку javascript'ов, смогли найти страницу логина (т.е. работа сайта не нарушится)
Далее подключаем этот файл к теме.
И немного css:
div#custom_login { position: absolute; /*или relative, смотря как будете использовать*/ left: 20px; top: 50px; } div#custom_login a { color: black; padding: 10px; position: relative; z-index: 9999; } div#custom_login a:hover { background: white; } div#custom_login .login_block { background: none repeat scroll 0 0 white; border: 1px dashed; display: none; padding: 10px; position: absolute; top: 0; }
У меня получилось вот так в обычном виде:
и вот так - при нажатии на кнопку ВХОД
С css я не заморачивался, извините =) Поменять цвет и фон, я надеюсь, вы сможете сами.
В принципе тут можно закончить урок - моя миссия завершена - popup логин сделан и готов к использованию. Но, всё же из любви к прекрасному, я подскажу как его немного темизировать.
Для в template.php запишем следующие 2 функции:
function ИМЯТЕМЫ_theme(){ return array( 'user_login_block' => array( 'arguments' => array('form' => NULL), ), ); } function ИМЯТЕМЫ_user_login_block($form) { unset($form['name']['#title']); unset($form['pass']['#title']); $form['name']['#value'] = 'Имя пользователя'; $form['name']['#attributes'] = array( 'onBlur'=> "if (this.value.length == 0) {this.value='{$form['name']['#value']}'}", 'onFocus'=> "if (this.value== '{$form['name']['#value']}') {this.value=''}" ); $form['submit']['#value'] = 'Вход'; return drupal_render($form); }
В итоге получается такой блок:
Теперь с помощью css можно привести блок к более симпатичному виду. Однако, это уже остаётся на самостоятельную работу по своему вкусу =)
- Spleshka
- 28.12.2010
- 45469
Комментарии
Как раз недавно про это писал :)
На мой взгляд, сокрытие формы логина через CSS не совсем верно, так как тогда граждане с отключенным JS (e.g. обладатели не очень новых мобильников) будут вынуждены переходить на страницу /user для входа, что еще менее удобно, чем оригинальный большой блок логина. Лучше всего добавить .hide() в JS.
да, но тогда внешняя красота сайта может быть нарушена торчащим посреди страницы блоком входа :) Хорошо, если блок никому не мешает - тогда ваш вариант работает. Но если блок перекрывает контент - то тут уже лучше через css, на мой взгляд
Расширенный вариант выпадалок с формами и прочих popup-ов. Подключаем модуль jquery_ui. Подключаем свой модуль из 5-ти строк кода (на hook_init вешаем функцию jquery_ui_add(array('ui.draggable', 'ui.resizable', 'ui.dialog'));) В теме (page.tpl.php) вызываем js-функцию dialog(), в которую передаем название формы и drupal_get_form(form_id) (в нашем случае - user_login_block). Результат - полностью настраиваемая выпадалка-лайтбокс, содержащая форму (ноду, блок, видео, все, что угодно можно засунуть). Рабочий "корпоративный" вариант из последнего сделанного можно посмотреть здесь - http://www.talentory.com/eng/user/register - клик на ссылку View под Terms & conditions (откроется нода). Базовый вариант - http://jqueryui.com/demos/dialog/. Это я к тому, что если необходим функционал чуть более гибкий, то лучше юзать уже готовые jquery-расширения.
Спасибо, Ростислав! Безусловно, в некоторых случаях гораздо проще воспользоваться готовыми вариантами. Но сайт с небольшим уклоном в самоделки, чтобы понимать "как оно там вертится-то". Именно поэтому я предлагаю всё сделать самим =)
SplasH привет :)
А если есть модуль формы отправки, самая простая, к примеру:
function form_menu(){
$items['form'] = array(
'title' => 'Отправить',
'description' => 'Отправить',
'page callback' => 'form_page',
'access arguments' => array('access content'),
'type' => MENU_SUGGESTED_ITEM,
);
return $items;
}
function form_page() {
$content = drupal_get_form('form_page_order');
return $content;
}
function form_page_order($form_state) {
$form['name']['fio'] = array(
'#type'=> 'textfield',
'#title'=> t('Ваше имя'),
'#default_value'=> $fio,
'#required'=> TRUE,
$form['submit'] = array(
'#type' => 'submit',
'#name' => 'sendMail',
'#id' => 'sbm_button',
'#value' => t('Submit'),
);
return $form;
}
Как форму можно загрузить в всплывающем окне ? Подскажи пожалуйста
ну оберни форму в див:
После этого повесь на клик какой-то кнопки/ссылки, чтобы показывало и скрывало твою форму:
Спасибо огромное, логику понял :)
Спасибо Жека) У меня тоже есть пара вопросов:
1. Сделал раскрывающимся стандартный блок входа. Но каждый раз когда авторизуюсь через него у меня все стопорится и белый экран..
Если нажать после этого Ф5 страница загрузится - и я уже авторизован.. Хрень какая-то.
2. Как сделать на седьмом осле, чтобы блок который мы раскрываем был поверх всего остального? А то он у меня под сайдбаром прячется..
@Graker
Вход и регистрацию можно продублировать в футере. Как на хабре.
1. Скорее всего надо поменять кодировку в template.php на UTF8 без BOM
2. Пропиши блоку, который должен раскрываться поверх остального в css:
А с логином в футере я подумаю :) Спасибо :)
Скажите пожалуйся, а можно ли как-то выводить это меню при наведении на ссылку из Primary links?
Заранее спасибо
можно) Самый простой вариант - посмотреть код у тэга li этого пункта меню, и повесить на него обработчик событий в скрипте.
Например, если бы я хотел повесить выскакивающий логин на пункт меню "Задать вопрос", то мой javascript файлик содержал бы:
Ничего не получается( у меня у всех пунктов меню стоит leaf.
а не menu-номер( Я где-то что-то неправильно сделал или не там ищу?
Выведите это меню через page.tpl.php таким же образом:
а форму регистрации как вывести можно?
Это форма логина. Присоединяюсь к вопросу по поводу регистрации...
тупоо:DEVIL::DEVIL:а смайлы класссс
Почему то слетал tabindex, пришлось поправить код:
Как сделать чтобы этот блок не всплывал на страницах /user*
А то это выглядит ужасно!
Решил так:
Только для uri не равным /user*
1. Добавляю класс (чтобы не сработал js)
2. Вставляю блок
Не совсем понятно где создаётся файл js, как он называется и как его подключить. Поясните пожалуйста.
Спасибо. Правда для 7-о друпала помучался.
Что то немогу никак заставить под 7 работать, подскажите в чём может быть загвоздка, такое впечатление что он куда то не туда выводит, всплывающее окно, при нажатии на кнопку ничего не происходит
А блок с логином на странице присутствует?
Уже второй раз перечитываю ваш урок, все описанное выше получается, но вот никак не получается с Pop-up javascript окном, как заставить работать все это на drupal 7, пожалуйста! помогите разобраться
Здравствуйте. Все сделал по уроку, Но! не работает. при нажатии на кнопку вход выводит ошибку, а при нажатии на кнопку регистрации перекидывает на стандартную регистрацию
Какую ошибку выдаёт при нажатии на вход?
на Drupal 5.9 ошибку выдаёт:
warning: preg_match() expects parameter 2 to be string, array given in /home/admin/domains/cliga.ru/public_html/includes/bootstrap.inc on line 670.
ошибку исправил с помощью http://www.drupal.ru/node/35647
но попап не работает, перекидывает на стандартную регистрацию
Спасибо за оперативную помощь, после вашего ответа всё сразу встало на свои места, такого подробного ответа давно не получал...)))
Почему то не выводиться блок входа... пересылает на страницу /user или /user
Если переадресовывает на другую страницу, значит, скрипт не отрабатывает. Это возможно по разным причинам. Наиболее вероятная - вы используете Drupal 7, а статья писалась под Drupal 6. Для того, чтобы скрипт отработал в семерке, он должен быть таким:
И ещё не забудьте убедиться, что файл подключен к странице.
а теперь Fatal error: [] operator not supported for strings in /home/everho/public_html/avtobelor.ru/includes/common.inc on line 2358 в нем находиться
$options['attributes']['class'][] = 'active';
Прошу прощения разобрался c ошибкой, но все же скрипт, не работает(( да он подключен scripts[] = js/theme.js таким способом. и при щелчке а вход он открывается /user но не блок входа может долны иметься какие нибудь дополнительные скрипты для 7ки?
.login_block {
padding: 150px 140px 67px;
} и увидел что сам блок он выводит но неправильно и боксы отсутствуют там... помогите почему так(
для корректной работы функции l() строчку :"$output .= l('Вход','user', array('attributes' => array('class' => 'login')));" нужно записывать как : "$output .= l('Вход','user', array('attributes' => array('class' =>array('login'))));"
Комментировать