モジュールのスタイル指定
2007年12月 6日 02:13

モジュールのスタイル指定


joomlaではモジュールを 呼び出す際に出力されるHTMLを指定できます。


モジュールを呼び出す構文の基本形
<jdoc:include type=”modules” name=”ポディション” style=”オプション” />

ポディションはtemplateDetails.xmlで宣言したポディション(配置)となります。
オプションはHTMLの出力フォーマットで以下の5種類が指定できます。使用頻度の高いオプションとしてはstyle=”xhtml”やstyle=”raw”の指定が考えられます。



<jdoc:include type=”modules” name=”right” />
指定しない場合はstyle=”raw“と同じ出力です。

出力例:
<ul
class="latestnews">
<li class="latestnews"><a href="home" class="latestnews">事業計画策定</a></li> </ul>

 

<jdoc:include type=”modules” name=”right” style=”horz” />

出力例:
<table cellspacing="1" cellpadding="0" border="0" width="100%"> <tr> <td valign="top"> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <th valign="top">新着ニュース</th> </tr> <tr> <td> <ul class="latestnews"> <li class="latestnews"><a href="home" class="latestnews">事業計画策定</a> </li> </ul> </td> </tr> </table> </td> </tr> </table>

 

<jdoc:include type=”modules” name=”right” style=”table” />

出力例:
<table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <th valign="top">新着ニュース</th> </tr> <tr> <td> <ul class="latestnews"> <li class="latestnews"><a href="home" class="latestnews">事業計画策定</a></li> </ul> </td> </tr> </table>

 

<jdoc:include type=”modules” name=”right” style=”xhtml” />

出力例:
<div class="moduletable"> <h3>新着ニュース</h3> <ul class="latestnews"> <li class="latestnews"><a href="home" class="latestnews">事業計画策定</a></li> </ul> </div>

 

<jdoc:include type=”modules” name=”right” style=”rounded” />

出力例:
<div class="module"> <div> <div> <div> <h3>新着ニュース</h3> <ul class="latestnews"> <li class="latestnews"><a href="home" class="latestnews">事業計画策定</a></li> </ul> </div> </div> </div> </div>

 

<jdoc:include type=”modules” name=”right” style=”raw” />

出力例:
<ul class="latestnews"> <li class="latestnews"><a href="home" class="latestnews">事業計画策定</a></li> </ul>




各スタイルの実際の出力(メニューモジュール例)



記述 出力されるHTML 表示状態
rounded
( milkywaykの初期設定)
<div class="module_menu">
  <div>
    <div>
      <div>
        <h3>Main Menu</h3>
        <ul class="menu">
          <li><!-- 各メニューアイテム --></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Image:Module_chrome_rounded.png

none
<ul class="menu">
  <li><!-- 各メニューアイテム--></li>
</ul>

Image:Module_chrome_none.png

table
<table cellpadding="0" cellspacing="0" class="moduletable_menu">
  <tr>
    <th valign="top">Main Menu</th>
  </tr>
  <tr>
    <td>
      <ul class="menu">
        <li><!-- 各メニューアイテム --></li>
      </ul>
    </td>
  </tr>
</table>

Image:Module_chrome_table.png

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>
            <ul class="menu">
              <li><!-- 各メニューアイテム --></li>
            </ul>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Image:Module_chrome_horz.png

xhtml
<div class="moduletable_menu">
  <h3>Main Menu</h3>
  <ul class="menu">
    <li><!-- 各メニューアイテム --></li>
  </ul>
</div>

Image:Module_chrome_xhtml.png

outline
<div class="mod-preview">
  <div class="mod-preview-info">left[outline]</div>

  <div class="mod-preview-wrapper">
    <ul class="menu">
      <li><!-- 各メニューアイテム --></li>
    </ul>
  </div>
</div>

Image:Module_chrome_outline.png

 
最終更新 ( 2008年08月 1日 02:26 )