УрокДелаем popup логин на jquery.ui.dialog
В ядре Drupal 7 появились дополнительные js библиотеки, которые можно подключать по необходимости (по умолчанию они отключены). В частности, библиотка jquery.ui, которая в 6й версии Друпала была . Теперь же достаточно вызвать функцию с нужными параметрами - и необходимые скрипты и стили будут подключены автоматически.
Итак, делаем красивый попап логин. Для начала в template.php подключаем скрипт jquery.ui.dialog, который будет отвечать за вывод блока во всплывающее окно. Подключение происходит на этапе препроцесса страницы:
function ИМЯТЕМЫ_preprocess_page(&$vars) { global $user; // Подключаем библиотеку только для анонимов if (!$user->uid) { drupal_add_library('system', 'ui.dialog'); // Добавляем ссылку, при нажатии на которую будет показываться логин $vars['login_button'] = l(t('Login'), 'user', array('attributes' => array('class' => array('user-login')))); } }
Далее в page.tpl.php выводим эту ссылку:
<?php print $login_button; ?>
Далее просто перейдите в раздел блоков и выставьте блок с логином в любой удобный вам регион. Там он будет показываться для тех пользователей, у которых браузеры не поддерживают js.
Теперь создаём свой скрипт (назовём, например, theme.js) с таким кодом:
(function($) { $(document).ready(function() { // Здесь указываем ID блока с логином var login_block = $('#block-user-login'); if (login_block.length > 0) { // Далее при загрузке страницы // блок переместится в попап, но не покажется login_block.dialog({ autoOpen: false, title: Drupal.t('Login'), resizable: false, modal: true, }); // По клику на ссылку логина - показываем попап $('.user-login').click(function() { login_block.dialog('open'); return false; }); } }); })(jQuery);
Подключаем js к теме. Далее раскрашиваем попап стилями - и красивая форма входа готова.
К форме можно прикрутить красивые визуальные эффекты, которые тоже входят в стандартную комплектацию Drupal 7. Давайте добавим эффекты при появлении и исчезновении всплывающего окна:
template.php
function ИМЯТЕМЫ_preprocess_page(&$vars) { global $user; if (!$user->uid && arg(0) != 'user') { drupal_add_library('system', 'ui.dialog'); drupal_add_library('system', 'effects.explode'); drupal_add_library('system', 'effects.slide'); $vars['login_button'] = l(t('Login'), 'user', array('attributes' => array('class' => array('user-login')))); } }
theme.js:
(function($) { $(document).ready(function() { var login_block = $('#block-user-login'); if (login_block.length > 0) { login_block.dialog({ autoOpen: false, title: Drupal.t('Login'), resizable: false, maxWidth: 245, modal: true, show: "slide", hide: "explode" }); $('.user-login').click(function() { login_block.dialog('open'); return false; }); } }); })(jQuery);
К тому же, jquery.ui позволяет его ещё и потаскать по всему сайту, если схватить за верхушку :) Пример работы вы можете посмотреть нажав на кнопку "Вход" справа вверху.
- SplasH
- 02.11.2011
- 5558

Комментарии
логичнее показывать окно сразу под кнопкой, а не в центре, лишние телодвижения
При открытии в диалоге форма автоматически получает фокус. Нажал на вход - и сразу вводи данные. Мне больше попап нравится.
я про то что попап надо показывать под кнопкой, а не в центре экрана. я на своих 23'' первый раз и не заметил что где-то открылось бледное окошечко ;)
понял про что ты. Да, действительно надо его переместить поближе к надписи. Спасибо.
Навешал плюшек на попап. Теперь незаметить его будет несколько сложнее)
Делаю все как написано.
Но почему-то не работает. Там где прописал
print $login_button;выводится ссылка "имя" и ведет на страницу /user.Что я не так делаю?
Так и должна выводиться ссылка и пести на страницу с юзером. Но если у вас будет работать скрипт - вместо перехода на /user откроется попап. И сбросьте кэш сайта на всякий случай.
Кэш, разумеется, сбрасывал.
Ладно, попробую еще раз и отпишусь
Как результаты?
Жень, большое вам спасибо за интересные посты. Многое уже в закладках :)
Теперь по теме поста. С блоками все понятно, а как по клику выцепить нужную страницу. К примеру, я установил модуль Contact.
В самом template.php достаточно поменять uri ссылки и класс.
В theme.js я изменил селектор (в моем случае, это id формы - #contact-site-form) и класс по клику на ссылку.
Модальное окно показывается только в том случае, если я уже нахожусь на странице контактов. В Аяксе я не силен, помогите, пожалуйста, подкорректировать код.
Для вашего случая подойдёт функция load(), которая позволяет вытягивать контент со страницы по селектору. Пример:
Чтобы load() по селектору работал в Drupal 6 - ставьте модуль jquery update.
Notice: Undefined variable: login_button в функции eval() (строка 1 в файле X:\home\dru7.loc\www\modules\php\php.module(74) : eval()'d code).
Здравствуйте!
вот такая вот ошибка вместо ссылки
Чтобы она могла значить ?
Спасибо!
так тут же все написано...не определена переменная login_button в функции eval() (строка 1 в файле по адресу X:\home\dru7.loc\www\modules\php\php.module(74) : eval()'d code)....открывай файл, и смотри че не так...или код файла кидай сюда...
Вот содержимое файла.
но не могу понять в чем дело так как плохо знаю php
А как ее определить функцию эту ?
все делаю так как в уроке, но выводит ошибку
и вообще это возможно реализовать на Drupal 7.9 ?
Хм. Вы вставляете кусок кода в блок, обрабатывая это форматом ввода php??
Я вставляю в созданный блок и обрабатывая это форматом ввода php получаю ошибку.
также я получаю ошибку когда вставляю этот же кусок кода в page.tpl.php.
По идее должно выводиться кнопка входа.
а выводиться ошибка.
Нет, если вы всё делали по уроку и в page.tpl.php выводили кнопку, то там она и выведется. В блок никакие переменные не передаются, т.к. вот этим кодом:
переменная добавляется только в шаблон page.tpl.php. В нём надо вывести её так:
И никаких ошибок не будет. Я сам именно этим способом себе сделал логин на этом сайте.
Здравствуйте, огромное спасибо, всё получилось с первого раза.
А вот ещё хотелось бы, чтобы была кнопка "Выход", ну и при залогинивании на сайте появлялась надпись, типа "Вы зашли, как User-Name, мы просто счастливы вас видеть".
Чтобы пользователь мог видеть, что он не анонимус, вошёл а на сайт.
Понятно, что можно сделать соответствующий блок, но как это сделать красиво?
Можно вот так написать в page.tpl.php:
Кнопка выйти делается ещё проще:
Оба кусочка кода можете положить в page.tpl.php в любое место.
Спасибо, получились, всё так просто и понятно! Даже я сразу въехал )))
Думаю, что и на вашем мегасуперсайте не помешало бы тоже какое-нибудь отображение зарегистрированного пользователя, ну, чтоб я видел, что зашёл, а то только кнопка "Вход" пропадает, и всё.
Пытаюсь изучать PHP, но, пока тяжко идёт. С таблицами и стилями было проще )))
Офигенно полезный сайт, огромное спасибо!
Хочу ещё задать вопрос по поиску...
Спасибо, я подумаю про кнопку "Выход". Скорее всего в блок вынесу.
Ещё момент, может быть кому-то полезно, типа таких чайников, как я.
Скрипт поп-окна не будет подхватываться, если отключён стандартный блок "Вход на сайт"
Спасибо очень полезный вариант исполнения. Я использовал ваш скрипт на 6 друпале и вот вернулся к нему на семерке. Но я хотел бы сказать вам про баг на вашем сайте: Если выключить яваскрипт в настройках браузера, то показывается блок входа на ваш сайт о обрезанном виде! (У меня браузер Мозила 10.0.1
Ещё раз спасибо за этот материал и ваще за весь сайт.
Хочу указать на один маленький косячок со стилями CSS, хотя может этот коммент больше относится к теме drupalace, но, думаю, в любом случае косячок затронет все темы, где применяется это окошко.
Дело в том, что классы, в к-рых задаётся ширина и др. фигня в этом popup окошке (в данном случае .ui-dialog), применяются и к остальным окошкам Друпала, я заметил, как открываются окна типа "добавить..." в панели управления Views. Смотрится с этим оформлением довольно забавно.
Думаю, надо бы прицепить дополнительный класс к конкретно этому окошку, и всё будет неплохо.
Спасибо, записал в список доработок темы :)
У меня проблема. Всё работает. За исключением того, что когда я захожу на сайт и захожу на другие страницы, то drupal выдаёт ошибку:
Notice: Undefined variable: login_button в функции include() (строка 174 в файле Z:\home\..\www\sites\all\themes\..\templates\page.tpl.php).
То бишь строка
print $login_button;Как решить?
Короче!
Всё решил!
Хорошенько прочитал этот форум и вместо "
print $login_button;" написал"
if ($user->uid):print l('Выход', 'user/logout');else: print $login_button;endif;"и - вуаля! - всё работает!
Хреноватенький код я придумал. Барахлит. Вобщем, перечитал внимательно я форум и впечатал ранее предложенные схемы.
Вопрос к автору данной классной штуки. Вобщем, всё хорошо, только при вызове этой формы куда-то пропадает курсор из поля ввода имени пользователя. Приходится мышкой заново его туда устанавливать для набора имени. Мелочь, а не приятно. Вобщем, как сделать, что бы он не пропадал?
Вобщем, приглашаю всех на страницу http://drupalace.ru/tehnologiya-sozdaniya-popup-okon для дальнейшего развития этой темы.
В теме kanji не заработало сразу же т.к. $vars называется $variables
Т.е. строка подключения кнопки выглядит так:
Я же так понимаю, нельзя определять вторую препроцесс функцию?
Все остальное получилось сразу же. Спасибо
Замеченные минусы:
1)Если пользователь неверно вбил пароль, то его выкидывает на основную страницу сайта, что не удобно
2) не закрывается окно логина, если кликнуть вне области окна.
Это возможно исправить?
да.
1) Пишем AJAX логин или используем модуль ajax_register.
2) Да, пишем обработчик, который по клику вне окна закрывает его.
Плагины для меня писать пока слишком сложно.
Можете подсказать насчет модуля ajax_register?
Как его настроить вообще.
Я его установил, но на странице осталась стандартный блок логина, но при логине видно что Ajax отрабатывает. И после завершения он мне в блоке пишет:
Login successful. You are now being redirected. И все. даже не показывается мне что я залогинился.
В итоге при переходе н а любую ссылку. страница перересовывается и блок исчезает.
Попровал как альтернативу fancy_login но там не отображаются соц.кнопки для логина ( модуль ulogin),что не подходит, а исравить я сам не представляю как
Как подгрузить форму динамически через скрипт?
Комментировать