รูปแบบโมดูลโครม Module chrome

Design Articles

Random Articles

Template Design

( 1 Vote )

เขียนโดย Administrator

วันศุกร์ที่ 07 พฤษภาคม 2010 เวลา 22:11 น.

คราวที่แล้วกล่าวถึง การจัดรูปแบบ menu ซึ่งเป็นเมนูแบบ style XHTML จะประกอบไปด้วย ul li

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

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

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

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

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

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

rounded (default for menus on milkyway)

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

output

<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

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

output

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

none

table

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

output

<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

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

output

<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

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

output

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

xhtml

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

output

<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>