10.2 标准的模块风格

Joomla网站是全模块化的设计，每一个模块都可能来自不同的开发者。为了让所有的内容能够无缝的融合在一起，Joomla提供了模板输出覆盖和模块风格。模块风格（Module chrome）允许模板设计者在模块输出的时候对其在模板中的显示进行一定程度的控制。

1，本节目标

理解什么模块的风格，以及他们的作用

2，模块的风格

2.1 什么是模块风格

模块的风格允许模板设计者对模块在该模板中的显示进行一定程度的控制。本质上，它是由少量的预定义HTML组成，这些HTML代码在每个模块的输出之前，之后或者周围插入一些代码，然后使用CSS设置样式。模块的风格一般被用来给模块提供边框，特别在创建圆角的时候非常的有用。

Joomla一个完整的模块内容包含两个部分，模块标题+模块内容。实际上要向前台输出一个模块，我们可以对其进行一定的控制。Joomla允许我们提供一写HTMl代码对模块的标题和内容进行包裹，一般进行统一的设置。一个典型的模块风格设置如下：

<div class="module-style">
  <div>
    <div>
      <div class="my-style">
        <h3 class="module-title">模块的标题</h3>
        <div class="module-content">模块的内容</div>
      </div>
    </div>
  </div>
</div>

在上面的代码中，模块的标题由后台管理员觉得，模块的内容由模块开发者决定。其他的部分（包裹这些内容的部分）就是我们所说的模块风格了 

2.2 模块风格的使用

在定义模块位置的时候，我们可以通过style属性来指定这个位置放置的模块的默认风格。具体代码如下：

<jdoc:include type="modules" name="sidebar" style="html5" />

上面的代码的意思是：只要放置到sidebar这个位置的模块，默认都使用html5风格来输出。换句话说，同一个模块放到不同的位置，整个模块的表现有可能不同，因为style参数可能会不同。

2.3 模块风格的手动设置

Joomla后台提供了一个设置模块风格的地方。如图 

3，标准的模块风格

Joomla 提供了7中标准的风格。分别是 none，rounded，table，horz，xhtml，html5，outline。这7中风格的定义在/templates/system/html/modules.php 这个文件中。下面以菜单模块为例来说明每一种样式的详情。（注意，为了展示好看，下面的例子使用了模块的后缀 _menu ,这个后缀并不会出现在其他的模块）

3.1 none(无)

none 这种风格非常的特殊。它不会模块的输出做任何的包裹。直接输出模块的内容。使用none风格输出的模块，所有的标题都不会显示。

3.2 rounded(圆角)

代码：

<div class="module_menu">
  <div>
    <div>
      <div>
        <h3>Main Menu 模块标题</h3>
        模块内容
      </div>
    </div>
  </div>
</div>

效果：

3.3 table(表格)

代码：

<table cellpadding="0" cellspacing="0" class="moduletable_menu">
  <tr>
    <th valign="top">Main Menu 模块标题</th>
  </tr>
  <tr>
    <td>模块内容</td>
  </tr>
</table>

效果:

3.4 horz（水平）

代码：

<table cellspacing="1" cellpadding="0" border="0" width="100%">
  <tr>
    <td valign="top">
      <table cellpadding="0" cellspacing="0" class="moduletable_menu">
        <tr>
          <th valign="top">Main Menu 模块标题</th>
        </tr>
        <tr>
          <td>模块内容</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

效果：

3.5 xhtml

代码：

<div class="moduletable_menu">
  <h3>Main Menu 模块标题</h3>
  模块内容
</div>

效果：

3.6 html5

代码：

<div class="well _menu">
  <h3 class="page-header">Main Menu 模块标题</h3>
模块内容
</div>

效果：

3.7 outline

代码：

<div class="mod-preview">
  <div class="mod-preview-info">left[outline]</div>
  <div class="mod-preview-wrapper">
模块内容
  </div>
</div>

效果： 

说明：

模块的风格并不一定会改变模块输出的外观，至于是否改变，完全依赖于模板的CSS代码 。例如，上面的none和horz风格,none没有任何的代码控制，但是显示的效果非常的类似。