[Joomla!] Responsywne tabele w Joomla! 3.0

W dzisiejszym wpisie poruszę temat implementacji responsywnych tabel w Joomla!. Wpis został przygotowany na prosbę jednego z czytelników tego bloga.
Jako że, szczegóły implementacji zostały już opisane wcześniej to nie będę się powtarzał i po więcej informacji zapraszam do artykułu o tabelach responsywnych.

Sekcja 1Implementacja funkcjonalności w szablonie Joomla! 3.0

Zamierzam bazować na szablonie Beez 3, który jest podstawowym szablonem dla najnowszej wersji Joomla!. Jest on dostępny w każdej paczce instalacyjnej systemu, więc nie będzie problemów z dostępem do niego. W Joomla! 3.0 domyślną biblioteką JS jest biblioteka jQuery zamiast Mootools. To zdecydowanie zwiększa możliwości implementacji skryptów JS oraz uwalnia nas od problemu walczenia z konfliktami między bibliotekami jQuery i Mootools.

Przed przystąpieniem do prac, należy pamiętać aby plik zawierający plugin jQuery Footable zamieścić w katalogu szablonu (najlepiej w katalogu javascript). Będziemy się do niego odwoływać w pliku index.php (znajduje się w głównym folderze szablonu) za pomocą następującego kawałka kodu:

1

    $doc->addScript($this->baseurl . '/templates/' . $this->template . '/javascript/footable-0.1.js', 'text/javascript');

Cały od JS szablonu Beez 3 został umieszczony w sekcji HEAD szablonu (to nie jest zalecane rozwiązanie - spowalnia ładowanie się strony; kod JS należy umieszczać przed koncowym znacznikiem body) i tam też należy zamiescić powyższy kawałek kodu.
W podobny sposób należy umieścić plik z kodem JavaScript, który będzie się uruchamiał dla każdej tabeli znajdującej się w artykułach utworzonych w systemie Joomla!, a który zawiera następujący kod JS:

1
2
3
4
5
6

    $(function() {
        $('table', 'article[class^="item-page"]').footable({
            tablet: 768,
            phone: 480
        });
    });

Należy pamiętać o tym, aby stosować od tego momentu wymagany sposób zapisu tabel, w któ?ym będziemy definiować które kolumny mają się ukrywać w wybranym trybie wyświetlania strony. W innym wypadku, każda tabela będzie sie zachowywała tak, jakby funkcjonalność pluginu nie została zaimplementowana na stronie.

Sekcja 2Podsumowanie

Tak zaimplementowany plugin w systemie szablonów Joomla! pozwala na osiągnięcie wielu ciekawych efektów na stronie oraz poprawi czytelność tabel na urządzeniach mobilnych.
Dodatkowo, wyżej przedstawiony sposób implementacji skryptów JS przyda się w wielu innych sytuacjach, np.: poczas implementacji różnego rodzaju pluginów jQuery czy też innego kodu JS.