View source
 
 <div id="user1">
 <jdoc:include type="modules" name="user1" style="xhtml" />
 </div>

คราวนี้มาดูว่าตรง style=”…..” แต่ละอันมีรูปแบบการแสดงผล (output) ออกมาเป็น html อย่างไร มีกี่ style เพื่อเป็นแนวทางในการออกแบบ joomla template 1.5

Module chrome โมดูลโครมคืออะไร (เกิดมาพึ่งเคยได้ยิน) พออ่านดูคราว ๆ เขาบอกว่าเป็นรูปแบบที่ใช้ควบคุม output ที่แสดงออกทาง html เพื่อให้ง่ายต่อการกำหนดรูปแบบและออกแบบ

View source
<jdoc:include type="modules" name="user1" style="custom" />

ใช้กำหนดใน ‘style‘ attribute  ตรง custom คือ Module chrome
name=”user1″ คือชื่อของตำแหน่ง (position)

 

มาดูรูปแบบของแต่ละอันกันครับ

rounded (default for menus on milkyway)

View source
<jdoc:include type="modules" name="user1" style="rounded"  />

output

View source
<div class="module_menu">
    <div>
        <div>
            <div>
                <h3>Main Menu</h3>
                    <ul class="menu">
                         <li><!-- various menu items --></li>
                    </ul>
              </div>
          </div>
      </div>
  </div>

rounded

 


none

View source
<jdoc:include type="modules" name="user1" style="none"   />

output

View source
<ul class="menu">
     <li><!-- various menu items --></li>
</ul>

none

 


table

View source
<jdoc:include type="modules" name="user1" style="table"    />

output

View source
<table cellpadding="0" cellspacing="0" class="moduletable_menu">
 <tr>
 <th valign="top">Main Menu</th>
   </tr>
     <tr>
       <td>
         <ul class="menu">
           <li><!-- various menu items --></li>
         </ul>
       </td>
     </tr>
</table>

table

 


horz

View source
<jdoc:include type="modules" name="user1" style="horz"     />

output

View source
<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><!-- various menu items --></li>
     </ul>
   </td>
 </tr>
 </table>
 </td>
 </tr>
</table>

horz

 


XHTML

View source
<jdoc:include type="modules" name="user1" style="xhtml"      />

output

View source
<div class="moduletable_menu">
   <h3>Main Menu</h3>
     <ul class="menu">
       <li><!-- various menu items --></li>
     </ul>
</div>

xhtml

 


outline ใช้กับ preview info ในการออกแบบคงไม่ได้ใช้

output

View source
<div class="mod-preview">
   <div class="mod-preview-info">left[outline]</div>
     <div class="mod-preview-wrapper">
       <ul class="menu">
         <li><!-- various menu items --></li>
       </ul>
     </div>
</div>

outline

จบเท่านี้ก่อนครับ แล้วพบกันคราวหน้า