УрокДелаем popup логин на jquery.ui.dialog
В ядре Drupal 7 появились дополнительные js библиотеки, которые можно подключать по необходимости (по умолчанию они отключены). В частности, библиотка jquery.ui, которая в 6й версии Друпала была отдельным модулем. Теперь же достаточно вызвать функцию drupal_add_library() с нужными параметрами - и необходимые скрипты и стили будут подключены автоматически.
Итак, делаем красивый попап логин. Для начала в 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 ($) { Drupal.behaviors.themeName= { attach:function (context, settings) { // Здесь указываем 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', context).click(function() { $login_block.dialog('open'); return false; }); } } }; })(jQuery);
Подключаем js к теме. Далее раскрашиваем попап стилями - и красивая форма входа готова.
К форме можно прикрутить красивые визуальные эффекты, которые тоже входят в стандартную комплектацию Drupal 7. Давайте добавим эффекты при появлении и исчезновении всплывающего окна:
template.php
function ИМЯТЕМЫ_preprocess_page(&$vars) { global $user; if (!$user->uid) { 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 ($) { Drupal.behaviors.themeName= { attach:function (context, settings) { // Здесь указываем 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, // Новые эффекты. show: 'slide', hide: 'explode' }); // По клику на ссылку логина - показываем попап. $('.user-login', context).click(function() { $login_block.dialog('open'); return false; }); } } }; })(jQuery);
К тому же, jquery.ui позволяет его ещё и потаскать по всему сайту, если схватить за верхушку :) Пример работы вы можете посмотреть нажав на кнопку "Вход" справа вверху.
- Spleshka
- 02.11.2011
- 51373
Комментарии
логичнее показывать окно сразу под кнопкой, а не в центре, лишние телодвижения
При открытии в диалоге форма автоматически получает фокус. Нажал на вход - и сразу вводи данные. Мне больше попап нравится.
я про то что попап надо показывать под кнопкой, а не в центре экрана. я на своих 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),что не подходит, а исравить я сам не представляю как
Как подгрузить форму динамически через скрипт?
Все делаю по инструкции, пишет ошибку что не может предопределить
С Jquerty последних версий скрипт не работает, а он необходим (и новая версия и скрипт). Возможно как-то доработать?
Fatal error: Cannot redeclare corporate_preprocess_page() (previously declared in /home/name/public_html/avtobelor.ru/sites/all/themes/corporate/template.php:45) in /home/name/public_html/avtobelor.ru/sites/all/themes/corporate/template.php on line 145
выводит такую ошибку что значит?
Скорее всего в файле template.php дважды записана одна и та же функция corporate_preprocess_page()
function corporate_preprocess_page(&$vars) {
if (isset($vars['main_menu'])) {
$vars['main_menu'] = theme('links__system_main_menu', array(
'links' => $vars['main_menu'],
'attributes' => array(
'class' => array('links', 'main-menu', 'clearfix'),
),
'heading' => array(
'text' => t('Main menu'),
'level' => 'h2',
'class' => array('element-invisible'),
)
));
}
else {
$vars['main_menu'] = FALSE;
}
if (isset($vars['secondary_menu'])) {
$vars['secondary_menu'] = theme('links__system_secondary_menu', array(
'links' => $vars['secondary_menu'],
'attributes' => array(
'class' => array('links', 'secondary-menu', 'clearfix'),
),
'heading' => array(
'text' => t('Secondary menu'),
'level' => 'h2',
'class' => array('element-invisible'),
)
));
}
else {
$vars['secondary_menu'] = FALSE;
}
} это есть там
Если такая функция уже имеется, то пишите нужный код в ней, а повторное ее определение приводит к ошибке.
Всем привет! Сделал все по инструкции из первого поста, но что-то не работает
После ввода логина и пароля и нажатия на кнопку войти вываливается такое сообщение
Что это?
Подскажите как при проверке валидации (по этому примеру прикручена webform) сделать так, чтобы не выкидывало на страницу вебформы при неверных значениях? То есть чтобы форма оставалась в том же окне?
Это вам к вебформе надо ajax прикручивать. Иначе - никак.
У меня не получается это сделать.
D7. Скрипт зарегистрирован через info.
page.tpl.php прописал.
А вот когда вставляю код в template.php, то сайт просто перестает открываться. Белая страница.
ИМЯТЕМЫ как положено заменил на имя своей темы с сохранением подчерка перед preprocess
Может быть глюк из-за длинного имени темы?
new_cons_woblik1_preprocess_page(&$vars) - вот такая у меня строка получается.
З.Ы. Увы. Сменил название темы, но белый лист все одно выпадает.
Закомментил все внутри функции - то же самое. Т.е. система ругается на само имя функции.
Вставлял в начале файла template после объявления <?php
Все работает, но есть проблемка, хочу вывести кнопку вход в "main-menu". Через модуль menu attributes сделал, все работает, но после того как залогинился, кнопка вход не исчезает и если на нее нажать ведет на форму профиля. Хотелось бы чтобы появлялась вместо нее кнопка Выход когда пользователь зашел. Пробую сейчас просто жестко поставить туда ссылку, прописав в page.tpl.php... как привязать к ссылке "user-login"? и как написать такое условие php? Не силен в php прошу помочь! Заранее спасибо!
А все, решено:) можно еще вопрос, проблема с кодировкой. В page.tpl.php создал новый див с ссылкой. На русском пишу "Вход" между и , но на сайте выходят знаки вопроса. Менял кодировку на utf-8, но тогда сайт съезжает, можно создать свою переменную которая будет переводить формат и просто тут вывести ее через php?
Убрать ошибку Notice: Undefined variable: login_button в функции include() (строка ....
можно таким кодом:
Добрый день!
А возможно сделать так, чтобы форма входа в модальном окне появлялась при входе на страницу /user из адресной строки, чтобы не делать ссылку входа на страницах сайта?
То есть, пользователь вводит в адресной строке Site/user или site/admin и видит модальное окно с формой входа, а после входа переходит на главную.
Все работает! Очень классно, красиво! Но вылетает такая назойливая ошибка
Notice: Undefined variable: login_button в функции include()
чтоб предпринять?
Сделал вроде все как по уроку. Появляется окошко как надо. потом переходит на строницу входа пользователя (что вроде тоже так надо). Но потом окошко модальное окно пропадает, даже не удается ввести хоть какие данные. Где можно порыться?
Добрый день!
Прежде всего спасибо Вам за труды, Вы делаете интернет лучше :)
Есть вопросик. У меня все заработало, но... В заголовке окна вместо надписи "Вход на сайт" выводится слово "Имя" и я никак не могу его побороть. По идее должно быть все просто, но увы. Подскажите куда рыть, пожалуйста.
Замените t('Login') на 'Вход на сайт'
Не получилось, делал все как написана в уроке. Несколько раз. Тема skeleton.
тож не получилось. вставляю в темплейт функции - интерфейс не грузится - белое окно... убираю - все нор.
Комментировать