Nawigacja jQuery w TYPO3

Częstym tematem na forum wielu początkujących użytkowników jest kwestia tworzenia menu wykorzystującego js do rozwijania. Wydaje się to często nad wyraz skomplikowane, ale w rzeczywistości jest równie proste jak generowanie zwykłego „nieefekciarskiego” menu. W przykładzie posłużę się najbardziej standardowym sposobem wykorzystującym jQuery. Do dzieła!

Założenia

Oto lista rzeczy których potrzebujemy:

-Biblioteka jQuery

- Odpowiednia struktura html nawigacji

o   <ul>

o     <li>Pozycja 1</li>

o     <li>

o     Pozycja 2

o       <ul>

o         <li>Pozycja 2a</li>

o         <li>Pozycja 2b

o       </ul>

o     </li>

o     <li>Pozycja 3</li>

o   </ul>

- Konfiguracja ts

Osobiście uważam, że największym problemem dla nowicjuszy jest stworzenie odpowiedniej struktury nawigacji z wykorzystaniem TS.

Biblioteka jQuery

To chyba najprostszy element całej układanki. Wchodzimy tutaj i ściągamy bibliotekę w najnowszej stabilnej wersji. Plik umieszczamy w odpowiedniej lokalizacji w katalogu fileadmin (ja osobiście umieszczam to zawsze w fileadmin/templates/lib).

Następnie w BE wybieramy moduł Template->Root page->setup. Tam dokonujemy następującego wpisu:

includeJS {

      file1 = fileadmin/templates/lib/jQuery.js

}

Po wszystkim !

Struktura HTML i konfiguracja TS

Teraz trochę trudniejsza zabawa. Menu nie będzie nam działać jeżeli odpowiednio go nie oprogramujemy. W tym celu wracamy do setup ( lub do innego szablonu TS jeżeli je dzielicie co jest dobrą praktyką, ale o tym kiedy indziej ). Poniżej przykład konfiguracji menu:

lib.main_menu = COA

lib.main_menu {

  special = directory

  # wartość 1 oznacza uid strony której podstrony mają zostać wybrane do menu

  special.value = 1

  wrap = <ul>|</ul>

# pierwszy poziom

  1 = TMENU

  1 {

      noBlur = 0

      expall = 1

# ustawiamy „owijanie” dla strony i jej podstroi

# dzięki temu właśnie zagnieździmy <ul> w <li>

      NO.wrapItemAndSub = <li>|</li>

  }

# drugi poziom

  2 = TMENU

  2 = {

      wrap = <ul>|</ul>

      noBlur = 0

      expAll = 1

      NO.wrapItemAndSub = <li>|</li>

  }

# trzeci poziom

  3 = TMENU

  3 = {

      wrap = <ul>|</ul>

      noBlur = 0

      expAll = 1

      NO.wrapItemAndSub = <li>|</li>

  }

}

Zapisujemy. Czyścimy cache i w ten sposób otrzymujemy naszą magiczną strukturę HTML.

Podsumowanie

Jak sami widzicie wytworzenie czegoś takiego nie jest niczym skomplikowanym i nie zajmuje wiele czasu. Oczywiście musicie zadbać o odpowiednie ostylowanie, ale to już indywidualna sprawa każdej strony.