--=REKLAMA=--

Ramka modułu

Z Joomla!WikiPL

Wersja Zwiastun (dyskusja | edycje) z dnia 01:13, 20 kwi 2009

(różn.) ← poprzednia wersja | przejdź do aktualnej wersji (różn.) | następna wersja → (różn.)


Ramki modułów [Module chrome] zapewniają projektantom pewien wpływ na wynikowy kod modułów wyświetlanych w ich szablonach. Zasadniczo, ramka składa się z niewielkiej ilości predefiniowanego kodu HTML, w którym osadzana jest treść generowana przez moduł i który może być stylizowany za pomocą CSS. Ramka modułu jest zwykle wykorzystywana do otaczania modułów obramowaniem, szczególnie z zaokrąglonymi rogami, ale możliwości wykorzystania ramek modułu są większe.


Ramka modułu jest ustalana przez atrybut 'style' umieszczony w instrukcji wywołującej moduł. Na przykład, następująca instrukcja umieszczona w pliku index.php szablonu wstawia moduły do pozycji 'user1' i ustala modułowi ramkę 'wlasna':

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

Można sprawdzić, że ta sama ramka modułu odnosi się do wszystkich modułów w jednej pozycji. Inaczej mówiąc - jeśli chcesz mieć dwa moduły w kolumnie, a równocześnie chcesz, aby różniły się ramką, musisz je umieścić w dwóch różnych pozycjach (np. 'user1' i 'user2').

Standardowy pakiet instalacyjny Joomla! 1.5 zawiera sześć domyślnych stylów ramek modułu. Ale elastyczność systemu szablonów powoduje, że nie jesteś ograniczony do tych sześciu stylów - łatwo możesz stworzyć więcej nowych stylów, jakie chcesz.

Zestawienie standardowych ramek modułu w Joomla! 1.5
Styl Wyjście (wynik) Wygląd
rounded (-3)
(domyślny dla menu w milkyway)
<div class="module_menu">
  <div>
    <div>
      <div>
        <h3>Menu witryny</h3>
        <ul class="menu">
          <li><!-- różne pozycje menu --></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Module chrome rounded.png

none (-1)
<ul class="menu">
  <li><!-- różne pozycje menu --></li>
</ul>

Module chrome none.png

table (0)
<table cellpadding="0" cellspacing="0" class="moduletable_menu">
  <tr>
    <th valign="top">Menu witryny</th>
  </tr>
  <tr>
    <td>
      <ul class="menu">
        <li><!-- różne pozycje menu --></li>
      </ul>
    </td>
  </tr>
</table>

Module chrome table.png

horz (1)
<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">Menu witryny</th>
        </tr>
        <tr>
          <td>
            <ul class="menu">
              <li><!-- różne pozycje menu --></li>
            </ul>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Module chrome horz.png

xhtml (-2)
<div class="moduletable_menu">
  <h3>Menu witryny</h3>
  <ul class="menu">
    <li><!-- różne pozycje menu --></li>
  </ul>
</div>

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><!-- różne pozycje menu --></li>
    </ul>
  </div>
</div>

Module chrome outline.png

Zauważ, że ramka modułu nie zmienia wszystkich szczegółów wyglądu - ten zależy od CSS zastosowanych w szablonie. Na przykład ramki 'none' oraz 'horz' wyglądają bardzo podobnie, chociaż wyświetlający je wynikowy kod HTML jest zupełnie inny.

Dziękujemy za wkład

» Stefan Wajda [zwiastun],