Ядро Joomla! основные понятия.

Модальное окно в Joomla нативными средствами (без сторонних плагинов)

Александр » 06 дек 2015, 19:58

Не все знают, что в CMS Joomla встроены уже все скрипты для создания модальных окон, в которых можно выводить различное содержимое: DOM-элементы, изображения, iframe, AJAX-запросы (не кроссдоменные будут работать из коробки, если нужны кроссдоменные – придется немного углубиться в код).

Модальное окно в Joomla нативными средствами (без сторонних плагинов)
Создание модального окна в Joomla
sozdanie-modalnogo-okna-v-joomla.jpg (59.42 Кб) Просмотров: 3510

Сразу хочу оговориться, что данная информация актуальна для всех версий Joomla от 1.5 до 3.5. Т. к. речь идет о предустановленной JavaScript-библиотеке «SqueezeBox». Оговорка связана с тем, что эта библиотека опирается на библиотеку MooTools, от поддержки которой разработчики Joomla стремятся полностью отказаться, кажется уже в 4-й версии, переводя Joomla на библиотеку jQuery.
Лежит эта JavaScript-библиотека по адресу корень сайта/media/system/js/modal.js.
CSS-файл (может пригодится для смены дизайна всплывающего оена) – по адресу media/system/css/modal.css.
Вообще, адрес сайта разработчика «SqueezeBox» http://digitarald.de/project/squeezebox ... squeezebox
Только, в Joomla по умолчанию во фронтэнде эта библиотека не подключена. Подключить её просто: один из способов в файле index.php шаблона до начала вывода разметки, в тегах <?php ... ?> вызвать статический метод:
Код: Выделить всё
JHTML::_('behavior.modal');

Тем , кто хочет глубже разобраться, рекомендую посмотреть метод modal класса JHtmlBehavior (в файле /libraries/cms/html/behavior.php, у Joomla! 3 он по такому адресу), там, в частности, видно, как происходит инициализация JavaScript-объекта SqueezeBox.
Помимо самой библиотеки SqueezeBox, подключаются MooTools и ... jQuery, да-да jQuery используется для инициализации javascript-объекта SqueezeBox, парсинга атрибутов, вот такой Mooдизмtools. Переходный период, что поделаешь..
В качестве селектора, на который навешивается обработчик клика для открытия модального окна в Joomla, по умолчанию назначены ссылки с классом modal.
Вообще, вот код инициализации в методе modal класса JHtmlBehavior::
Код: Выделить всё
public static function modal($selector = 'a.modal', $params = array())
   {
      $document = JFactory::getDocument();

      // Load the necessary files if they haven't yet been loaded
      if (!isset(static::$loaded[__METHOD__]))
      {
         // Include MooTools framework
         static::framework(true);

         // Load the JavaScript and css
         JHtml::_('script', 'system/modal.js', true, true);
         JHtml::_('stylesheet', 'system/modal.css', array(), true);
      }

      $sig = md5(serialize(array($selector, $params)));

      if (isset(static::$loaded[__METHOD__][$sig]))
      {
         return;
      }

      // Setup options object
      $opt['ajaxOptions']   = (isset($params['ajaxOptions']) && (is_array($params['ajaxOptions']))) ? $params['ajaxOptions'] : null;
      $opt['handler']       = (isset($params['handler'])) ? $params['handler'] : null;
      $opt['parseSecure']   = (isset($params['parseSecure'])) ? (bool) $params['parseSecure'] : null;
      $opt['closable']      = (isset($params['closable'])) ? (bool) $params['closable'] : null;
      $opt['closeBtn']      = (isset($params['closeBtn'])) ? (bool) $params['closeBtn'] : null;
      $opt['iframePreload'] = (isset($params['iframePreload'])) ? (bool) $params['iframePreload'] : null;
      $opt['iframeOptions'] = (isset($params['iframeOptions']) && (is_array($params['iframeOptions']))) ? $params['iframeOptions'] : null;
      $opt['size']          = (isset($params['size']) && (is_array($params['size']))) ? $params['size'] : null;
      $opt['shadow']        = (isset($params['shadow'])) ? $params['shadow'] : null;
      $opt['overlay']       = (isset($params['overlay'])) ? $params['overlay'] : null;
      $opt['onOpen']        = (isset($params['onOpen'])) ? $params['onOpen'] : null;
      $opt['onClose']       = (isset($params['onClose'])) ? $params['onClose'] : null;
      $opt['onUpdate']      = (isset($params['onUpdate'])) ? $params['onUpdate'] : null;
      $opt['onResize']      = (isset($params['onResize'])) ? $params['onResize'] : null;
      $opt['onMove']        = (isset($params['onMove'])) ? $params['onMove'] : null;
      $opt['onShow']        = (isset($params['onShow'])) ? $params['onShow'] : null;
      $opt['onHide']        = (isset($params['onHide'])) ? $params['onHide'] : null;

      // Include jQuery
      JHtml::_('jquery.framework');

      if (isset($params['fullScreen']) && (bool) $params['fullScreen'])
      {
         $opt['size']      = array('x' => '\jQuery(window).width() - 80', 'y' => '\jQuery(window).height() - 80');
      }

      $options = JHtml::getJSObject($opt);

      // Attach modal behavior to document
      $document
         ->addScriptDeclaration(
         "
      jQuery(function($) {
         SqueezeBox.initialize(" . $options . ");
         SqueezeBox.assign($('" . $selector . "').get(), {
            parse: 'rel'
         });
      });
      function jModalClose() {
         SqueezeBox.close();
      }"
      );

А вот параметры инициализации JS-объекта SqueezeBox (файл /media/system/js/modal.js):
Код: Выделить всё
   presets: {
      onOpen: function(){},
      onClose: function(){},
      onUpdate: function(){},
      onResize: function(){},
      onMove: function(){},
      onShow: function(){},
      onHide: function(){},
      size: {x: 600, y: 450},
      sizeLoading: {x: 200, y: 150},
      marginInner: {x: 20, y: 20},
      marginImage: {x: 50, y: 75},
      handler: false,
      target: null,
      closable: true,
      closeBtn: true,
      zIndex: 65555,
      overlayOpacity: 0.7,
      classWindow: '',
      classOverlay: '',
      overlayFx: {},
      resizeFx: {},
      contentFx: {},
      parse: false, // 'rel'
      parseSecure: false,
      shadow: true,
      overlay: true,
      document: null,
      ajaxOptions: {}
   }

В общем, с настройками по умолчанию, для того чтобы создать эффект всплывающего окна с каким-либо содержимым, нужно создать ссылку, присвоить ей CSS-класс "modal", если вам нужно загрузить в сплывающее окно изображение или HTML-страницу со своего сайта, то можно дополнительных параметров не указывать, только указать нужный атрибут src у ссылки, всё должно заработать. Если, например, нужно загрузить в модальное окно видео, то самый простой способ – задать в параметрах обработчик iframe. Параметры задаются через атрибут rel ссылки в виде JSON нотации.
Например, код ссылки, открывающей ролик с Youtube:
Код: Выделить всё
<a href="https://www.youtube.com/embed/I3t8qw6MGtE" class="modal" rel="{handler:'iframe',size:{x:840,y:550}}">аналитик Лидия Аркадьевна.</a>

Естественно, можно указывать параметры окна, которые указаны в пресетах объекта SqueezeBox, здесь все я разбирать смысла не вижу, для того в код смотреть и предлагаю.
Скажу только, что в окно можно загрузить содержимое какого-либо DOM-элемента со страницы, для этого ему нужно назначить атрибут id, а в качестве атрибута src ссылки, открывающей окно нужно указать этот id. Например:
Код: Выделить всё
<a href="#div1" class="modal" rel="size:{x:840,y:550}}">Открыть модальное окно с содержимым div, имеющего id div1</a>
Александр
 
Сообщения: 207
Зарегистрирован: 20 мар 2014, 17:05

Re: Модальное окно в Joomla нативными средствами (без сторонних плагинов)

Vova-83 » 26 мар 2017, 00:44

А кто на картинке? Что за бабка)))))
А.. нашел по адресу https://www.youtube.com/watch?v=I3t8qw6MGtE ну и трэш.. канал у них :shock: :shock: :shock: :P :P :P
Vova-83
 
Сообщения: 4
Зарегистрирован: 19 ноя 2016, 18:55



Вернуться в Ядро Joomla!