RSS   Twitter   Copiny   Copiny
Нашел ошибку? 

Выдели фрагмент текста с ошибкой или неточностью и нажми Ctrl+Enter!

Создание своего стиля сhrome для модулей

Chrome - это конечная обработка html-кода модуля перед его вставкой в главный шаблон сайта. Существуют несколько предопределенных Chrome-стилей (table, horz, xhtml, rounded, outline), но не всегда то что есть подходит для решения текущих задач.

Чтобы определить собственный стиль отображения в шаблоне, нужно создать файл "modules.php" в директории "html". То есть для шаблона с именем "my_template" файл должен располагаться тут - "templates/my_template/html/modules.php".

В этом файле вы должны определить функцию с названием "modChrome_STYLE" где STYLE это имя вашего стиля. Эта функция будет принимать три аргумента - $module, &$params и &$attribs как показано ниже:

function modChrome_STYLE ( $module, &$params, &$attribs )
{
     /* обработка и вывод html-кода модуля */ 
}

В этой функции вы можете использовать любой PHP-код, а так же вам будут доступны все параметры самого модуля, его свойства и любые данные сохраненные в базе данных Joomla. В основном бывают нужны только следующее

  • $module->content - контент самого модуля, непосредственный html-код.
  • $module->title - название модуля, указанное в панели управления в менеджере модулей.
  • $module->showtitle - флаг, показывать название или нет (true или false).

Функция modChrome_STYLE - это обыкновенная php-функция, здесь можете использовать абсолютно любой php-код. Ниже приведен пример, если в настройках модуля включено отображение заголовка, то выведется текст заголовка перед контентом модуля.

function modChrome_STYLE ( $module, &$params, &$attribs )
{
    if ($module->showtitle) {
        echo '<h2>' .$module->title .'</h2>'; 
    }
    echo $module->content;
}

Есть возможность обратиться к любым параметрам модуля. Например, обрамим модуль классом

<div class="<?php echo $params->get( 'moduleclass_sfx' ); ?>">
    <!-- div contents -->
</div>

Так же можно в код позиции добавлять свои атрибуты, которые используются в Chrome. Для этого в тег позиции <jdoc:include /> добавьте собственные атрибуты. Имена дополнительных атрибутов можно указывать произвольные, они все будут передаваться в ассоциативный массив $attribs.

Практический пример Chrome-функции:

function modChrome_custom( $module, $params, $attribs ) {
    if (isset( $attribs['headerLevel'] )) 
    {
        $headerLevel = $attribs['headerLevel'];
    } else {
        $headerLevel = 3;
    }

    if (isset( $attribs['background'] )) 
    {
        $background = $attribs['background'];
    } else {
        $background = 'blue';
    }
 
    echo '<div >';

    if ($module->showtitle) 
    {
        echo '<h' .$headerLevel .'>' .$module->title .'</h' .$headerLevel .'>';
    }
 
    echo '<div class='.$background.'>';
    echo $module->content;
    echo '</div>';
 
    echo '</div>';
}

Практические примеры использования функции "modChrome_custom"

<!-- вызов в шаблоне -->
<jdoc:include type="modules" name="user1" style="custom" />

<!-- HTML-код на выходе -->
<div>
    <h3><!-- Module title --></h3>
    <div class="blue">
        <!-- Module content -->
    </div>
</div>
<!-- вызов в шаблоне -->
<jdoc:include type="modules" name="user1" style="custom" background="green" />

<!-- HTML-код на выходе -->
<div>
    <h3><!-- Module title --></h3>
    <div class="green">
        <!-- Module content -->
    </div>
</div>
<!-- вызов  в шаблоне -->
<jdoc:include type="modules" name="user1" style="custom" headerLevel="1" background="yellow" />

<!-- HTML-код на выходе -->
<div>
    <h1><!-- Module title --></h1>
    <div class="yellow">
        <!-- Module content -->
    </div>
</div>

Смотрите также:
Комментарии (2) Добавить комментарий
  • Anatol
    Anatol
    16 Февраля 2013, 16:41
     ↑  +3  ↓     ответ

    Спасибо за хороший материал.

  • Ирина
    Ирина
    12 Августа 2013, 20:14
     ↑  0  ↓     ответ

    Спасибо, все подробно написано

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




* обязательно для заполнения

1 введенный почтовый адрес используется только для обратной связи при ответах в комментариях и сервиса gravatar.com
.