会员登录

联系我们

电话:18921289006

传真:0510-88804819

EMAIL: 这个 E-mail 受所垃圾邮件程序保护,您需要启用 JavaScript 才能查看。

开发手记

自定义joomla模块的样式(module chrome)

打印 Email

如果要自定义一个模块样式(module chrome),必须先在当前模板的html文件夹里新建一个modules.php文件,列如:templates/TEMPLATE_NAME(默认模板)/html/modules.php。
在这个文件里你必须定义一个叫modChrome_STYLE的函数,STYLE也就是你样式的名称,这个函数有个三个变量参数,$module, &$params, 和&$attribs,例如:

 

<?php 
  function modChrome_STYLE( $module, &$params, &$attribs ) 
  {
    /* chromed Module output goes here */
  }
?>


用这个函数你可以确保使用该样式的模块得到所有关于模块的参数,例如:数据库里的yufi_module字段。不过需要使用像 $module->content, $module->showtitle$module->title. $module->showtitle 布尔值 的变量, 如果是true (当模块标题显示) 或者false (没有显示时). $module->content$module->title 将分别返回模块的内容和标题。
该函数是一个普通的PHP函数,因此可以用PHP代码IF声明来检查$module->showtitle的值,然后决定是否包含标题,例如:

<?php
  if ($module->showtitle) 
  {
    echo '<h2>' .$module->title .'</h2>';
  }
?>

模块的参数设置一般是使用$params对象。例如你在后台的模块管理里面一般都有一个模块CSS后 缀,你填写的后缀用moduleclass_sfx保存在该$params对象中,使用方法如下: <div class="<?php echo $params->get( 'moduleclass_sfx' ); ?>"> <!-- div contents --> </div> 这样就可以实现模块的CSS样式不同于其它模块。 自定义模块样式(module chrome)

你也可以更进一步的将利用<jdoc:include /> 声明将样式加进模块里去。这些添加的属性可以是任何 样式,他们将存储在$attribs数组中,下面是示例:

<?php
  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 class="' .$params->get( 'moduleclass_sfx' ) .'" >';
 
    if ($module->showtitle) 
    {
      echo '<h' .$headerLevel .'>' .$module->title .'</h' .$headerLevel .'>';
    }
 
    echo '<div class="' .$background .'">';
    echo $module->content;
    echo '</div>';
 
    echo '</div>';
  }
?>
如果你在<jdoc:include/>声明里加进backgroundheaderLevel 像下面这样。如果没有值设置,属性将
默认为"blue"和"3"。

<jdoc:include /> statement Output

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

<div>
  <h3><!-- Module title --></h3>
 
  <div class="blue">
    <!-- Module content -->
  </div>
</div>

<jdoc:include type="modules" name="user1" background="green" />

<div>
  <h3><!-- Module title --></h3>
 
  <div class="green">
    <!-- Module content -->
  </div>
</div>

<jdoc:include type="modules" name="user1" headerLevel="1" background="yellow" />

<div>
  <h1><!-- Module title --></h1>
 
  <div class="yellow">
    <!-- Module content -->
  </div>
</div>