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

如果要自定义一个模块样式(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 >'; if ($module->showtitle) { echo '<h' .$headerLevel .'>' .$module->title .'</h' .$headerLevel .'>'; } echo '<div>'; echo $module->content; echo '</div>'; echo '</div>'; }?>如果你在<jdoc:include/>声明里加进background 和headerLevel 像下面这样。如果没有值设置,属性将默认为"blue"和"3"。
<jdoc:include /> statementOutput<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>
Tags:  joomla之门 joomla

延伸阅读

最新评论

发表评论