Главная / CMS / Системы управления контентом / Joomla /

Что такое модуль Chrome для Joomla

Понедельник, 13 Декабрь 2010

При разработке шаблона для CMS joomla верстальщик шаблона может определять окружающий HTML код при выводе модулей в шаблоне. Этот окружающий (обрамляющий), HTML состоит из небольшого количества доступных вариантов, который встраивается до и после вывода модуля в шаблоне joomla, а по существу сам вывод модуля помещается внутрь вложенных DIV, списков UL, или таблиц Table.

Такая возможность очень удобна для применения CSS стилей к конкретному модулю, указывая CSS правила для окружающего модуль HTML кода. Например если вам потребуется вывести модуль в контейнере с закругленными уголками, вам потребуется оружающий HTML в виде вложенных контейнеров DIV, для установки фоновой картинки с закругленными уголками по четырем сторонам. Но это лишь один из примеров.

Стиль обрамления Chrome указывается в объявлении вызова модуля в значении атрибута style='' в шаблоне. Например следующая инструкция, может быть использована в файле шаблона index.php, для вывода модулей в положенее user1 и использовать стиль вывода Chrome - "custom"

 
<jdoc:include type="modules" name="user1" style="custom" />

В итоге все модули выводимые в позиции user1 будут иметь опрамляющий HTML соответствующий стилю custom. Если же к примеру, вам потребуется в одной колонке вывести модули с различным стилем Chrome вам прийдется прописать еще одну инструкцию вызова модуля с иной позицией и необходимым стилем, то есть вот так:

 
<jdoc:include type="modules" name="user1" style="custom" />
<jdoc:include type="modules" name="user2" style="rounded" />

Стандартный пакет Joomla 1.5!, по умолчанию включает в себя шесть вариантов стилей Chrome, рассмотрим их на примере выода модуля mod_mainmenu.

Стиль вывода rounded :

 
<div class="module_menu">
  <div>
    <div>
      <div>
        <h3>Main Menu</h3>
        <ul class="menu">
          <li><!-- various menu items --></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Стиль вывода none :

 
<ul class="menu">
  <li><!-- various menu items --></li>
</ul>

Стиль вывода table :

 
<table cellpadding="0" cellspacing="0" class="moduletable_menu">
  <tr>
    <th valign="top">Main Menu</th>
  </tr>
  <tr>
    <td>
      <ul class="menu">
        <li><!-- various menu items --></li>
      </ul>
    </td>
  </tr>
</table>

Стиль вывода horz :

 
<table cellspacing="1" cellpadding="0" border="0" width="100%">
  <tr>
    <td valign="top">
      <table cellpadding="0" cellspacing="0" class="moduletable_menu">
        <tr>
          <th valign="top">Main Menu</th>
        </tr>
        <tr>
          <td>
            <ul class="menu">
              <li><!-- various menu items --></li>
            </ul>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Стиль вывода xhtml :

 
<div class="moduletable_menu">
  <h3>Main Menu</h3>
  <ul class="menu">
    <li><!-- various menu items --></li>
  </ul>
</div>

Стиль вывода outline :

 
<div class="mod-preview">
  <div class="mod-preview-info">left[outline]</div>
  <div class="mod-preview-wrapper">
    <ul class="menu">
      <li><!-- various menu items --></li>
    </ul>
  </div>
</div>

Обратите внимание, что модуль Chrome не изменяет внешний вид модуля, все зависит от CSS.

PS. И не забудьте подписаться на ленту новостей RSS

Метки:

Что такое модуль Chrome для Joomla

Похожие статьи:

Комментарии

Добавить комментарий