南荒工作室

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

2009-04-14 09:59 南荒
        如果要自定义一个模块样式(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 */
  }
?>

用这个函数你可以确保使用该样式的模块得到所有关于模块的参数，例如：数据库里的jos_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/>声明里加进background 和headerLevel 像下面这样。如果没有值设置，属性将
默认为"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>

feed0 Comments

Write comment
 
 
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger
 

security image
Write the displayed characters

busy
最后更新 ( 2009-04-14 10:54 )  

案例展示

LiveZilla Live Help