Размещение модуля «в деталях»

Размещение модуля «в деталях»

Давайте ближе рассмотрим панель модуля, расположенную слева:

Рис. 26: Модуль, расположенный слева

В HTML коде файла index.php имеется следующий фрагмент:

<div id="leftcolumn">

<jdoc:exists type="modules" condition="left" >

<jdoc:include type="modules" name="left" style="-3" />

</jdoc:exists>

</div>

В форматировании тега <div> используется идентификатор CSS под названием leftoclumn.

Контент между тегами <jdocs:exists> и </jdocs:exists> отображается только если выполняются условия параметров. В данном случае отображение будет зависеть от наличия модуля или модулей в положении «слева» (left). Если таких модулей нет, общая разметка шаблона динамически изменится, чтобы заполнить пустое место.

В нашем случае имеется три модуля.

CSS идентификатор левой колонке выглядит в CSS файле следующим образом:

#leftcolumn {

padding: 0;

margin: 0;

width: 20%;

float:left;

}

Если вы посмотрите на исходный код страницы, отображаемой в веб браузере (нажать правой кнопкой на странице и выбрать Просмотреть исходный код страницы (View Page Source)), то увидите, что jdoc запрос Joomla! сгенерировал на самом деле значительно больший объем кода.

Листинг 7: Выдержка из исходного кодаHTML страницы

… дополнительные HTML команды

<div id="leftcolumn">

<div class="modulemenu">

<div>

<div>

<div>

<h3>Main Menu</h3><ul class="mainmenu">

<li class="level1 item1 active current">…</li>

<li class="level1 item2">…</li>

</div>

</div>

</div>

</div>

<div class="modulemenu">

<div>

<div>

<div>

<table …>

<tr ><td>…</td></tr>

<tr ><td>…</td></tr>

</table>

</div>

</div>

</div>

</div>

… дополнительные HTML команды

В данном фрагменте кода особо отметим CSS класс module_menu. Описание данного класса в CSS файле выглядит следующим образом:

div.module_menu {

background: url(../images/mw_box_blue_br.png)

100% 100% no-repeat;

… дополнительные команды …

}

div.module_menu div {

background: url(../images/mw_box_blue_bl.png)

0 100% no-repeat;

}

div.module_menu div div {

background: url(../images/mw_box_blue_tr.png)

100% 0 no-repeat;

}

div.module_menu div div div {

background: url(../images/mw_box_blue_tl.png)

0 0 no-repeat;

padding: 10px;

padding-top: 30px;

padding-bottom: 15px;

width: auto;

}

div.module_menu div div div div {

background: none;

padding: 0;

}

Четыре блока CSS активируют определенные фоновые рисунки в каждом из тегов <div>.

В нашем случае результатом использования этого кода является меню с закругленными углами. Также в этом CSS файле имеются дополнительные строки, форматирующие заголовки третьего порядка (<h3></h3>), и несортированный список элементов меню.

Пока все идет нормально. Тип форматирования выбран, а отображение тегов <div> можно в любой момент изменить с помощью атрибута style (список всех параметров можно найти в дополнении). В первом примере мы использовали код –1, в этом примере мы используем код –3. Использование именно этого кода необходимо при работе с тегами <div>. Однако, если вы продолжите читать листинг 7 далее, то снова наткнетесь на таблицы. Модуль входа в систему (Login Module) все еще работает с помощью таблиц. На данном этапе развития Joomla! редактирование модуля входа в систему без использования таблиц может быть проблемой. Однако и здесь есть решение.