MIDAV.RU

MIDAV.RU

Учусь делать сайты в свободное время .

Вывод модуля в модальном окне в Joomla 3 с помощью jQuery

Просмотров: 3545Комментарии: 2
Joomla
Вывод модуля в модальном окне в Joomla 3 с помощью jQuery

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

Порядок действий будет таким же , как и в предыдущей статье . Для вывода модулей в модальном окне сделаем свой шаблон вывода . Для этого в папке шаблона создадим файл module_colorbox.php с таким содержимым :

input;
$moduleposition = $input->getCmd('moduleposition','module-modal');
$modulestyle = $input->getCmd('modulestyle','xhtml');
?>

Затем в файле index.php шаблона подключим плагин Colorbox и необходимый код для его работы . И конечно в нужном месте шаблона выведем ссылку для вывода модуля в модальном окне .

Для начала скачаем файлы плагина с сайта разработчика . И поместим нужные нам файлы плагина в папку /media/colorbox/ . Нам будет нужен главный файл плагина jquery.colorbox-min.js , а также стили и картинки одной из тем оформления . Я взял из папки example1 , нужен файл colorbox.css и папка с картинками .

Подключим в шаблоне плагин colorbox , где-нибудь в начале файла шаблона :

$doc->addScript('media/colorbox/jquery.colorbox-min.js')
->addScriptDeclaration('
jQuery(document).ready(function(){
jQuery("#link-module-colorbox").colorbox(); // подключаем colorbox к ссылке с id link-module-colorbox
}); ')
->addStylesheet('media/colorbox/colorbox.css');

И вставим в нужном месте шаблона ссылку с нужными параметрами :

Module in Colorbox

Вот и всё , должно работать smile

module-in-colorbox.jpg

Теперь реализуем ситуацию с конкретным модулем . Мучить будем опять форму входа на сайт smile По привычке создадим альтернативный макет для вывода модуля , чтобы не портить оригинальные файлы . И в настройках модулях выберем этот макет . В папке шаблона html/mod_login создадим файлы colorbox.php и colorbox_logout.php , взяв за основу дефолтные файлы модуля . Файл colorbox_logout.php оставляем без изменений . А в файле colorbox.php подключим файл плагина , его стили и сам js код . А также добавим ссылку для открытия модуля и див обёртку , чтобы скрыть форму входа на сайте .

addScript('media/colorbox/jquery.colorbox-min.js')
->addScriptDeclaration('
jQuery(document).ready(function(){
jQuery("#link-login-colorbox").colorbox({inline:true});
}); ')
->addStylesheet('media/colorbox/colorbox.css');
?>
Войти
... тут содержимое формы входа , его менять не надо

loginform-in-colorbox.jpg

Вот таким образом можно выводить модули в модальном окне при помощи jQuery плагина Colorbox . При желании можно использовать другой плагин , их написано немало . Или вообще написать весь код самому , используя только ядро jQuery и CSS .

Комментариев: 2 RSS

test page test page
Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question


Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

     

  

Если вы уже зарегистрированы как комментатор или хотите зарегистрироваться, укажите пароль и свой действующий email. При регистрации на указанный адрес придет письмо со ссылкой на ваш персональный аккаунт, где вы сможете изменить свои данные, включая адрес сайта, ник, описание, контакты и т.д., а также подписку на новые комментарии.

(обязательно)