Разработка шаблона модуля Разработка шаблона модуля «Login»: вывод формы регистрации в SqueezeBox (Joomla 1.6/Joomla 1.7/Joomla 2.5).

SqueezeBox — стандартный для Joomla тип модального окна, использующий в качестве основной библиотеки mootools.

Для подключения SqueezeBox в шаблоне используется конструкция:

JHTML::_('behavior.modal');

, это добавит в страницы следующий JS:

window.addEvent('domready', function() { SqueezeBox.initialize({}); SqueezeBox.assign($$('a.modal'), { parse: 'rel' }); }); 

В Joomla 1.6/1.7/2.5 есть возможность создания собственных альтернативных шаблонов компонентов/модулей, и возможность выбора их в настройках, ей и воспользуемся.

1. В папке шаблона создаем папку templates/ваш_шаблон/html/mod_login и копируем в нее шаблон модуля mod_login (/modules/mod_login/tmpl/default.php).
2. Если на сайте кроме нашего компактного варианта будет использоваться и полный вариант формы, то создаем копию данного шаблона, назвав ее lightbox.php (имя может быть любым, за исключением default.php), в итоге в папке должно быть два файла lightbox.php и default.php, для работы нам понадобиться lightbox.php.
3. Далее работаем с файлом lightbox.php Добавляем в начало файла (сразу после defined('_JEXEC') or die; Jhtml::_('behavior.keepalive');) следующий код:

   JHTML::_('behavior.modal');
    JHTML::_('stylesheet', $filename = 'style.css', $path = 'templates/ваш_шаблон/html/mod_login/' , $attribs = array() );

 Создаем в папке templates/ваш_шаблон/html/mod_login файл style.css (если вы планируете проводить оптимизацию сайта, то рекомендую все стили сразу прописывать в основном файле стилей используемого шаблона, в этом случае вторую строку добавлять не следует). Первая строка кода подключит SqueezeBox, вторая добавит ссылку на файл стилей данного шаблона.

4. Шаблон модуля «Login» состоит из двух частей: первая отвечает за вывод формы выхода, выторая за вывод формы входа, нам потребуется только вторая, находится в районе 34 строки и начинается с кода:

   <form id="login-form" action="<?php echo JRoute::_('index.php', true, $params->get('usesecure')); ?>" method="post"></form>

5. Для вывода ссылки вывода SqueezeBox используется ссылка с указанием id стиля блока (так же указываются: класс modal и размер модального окна), в котором находится контент для вывода в модальном окне.

   <a class="modal" href="#login-form" rel="{size:{x:300,y:300}}">Форма входа</a>

6. Заключаем всю форму входа в блок с id=«login-form».
7. В итоге получаем следующую конструкцию:

   <a class="modal" href="#login-form" rel="{size:{x:300,y:300}}">Ссылка на html-элемент</a>
    <div id="login-form">
      <form action="<?php echo JRoute::_('index.php', true, $params->get('usesecure')); ?>" method="post" id="login-form" >
      ...
      </form>
    </div>

8. Дописываем в файле стилей:

   #login-form { display: none }

9. Выбор шаблона производится в настройках модуля/компонента на спойлере Дополнительные параметры, параметр — Альтернативный макет.