--=REKLAMA=--

Dodawanie JavaScript i CSS do strony

Z Joomla!WikiPL

Bardzo często nasze rozszerzenia wymagają dodatkowych skryptów JavaScript lub arkuszy stylów CSS. Poniżej znajdziesz porady, w jaki sposób dodać zewnętrzne skrypty lub arkusze stylów. Większość skryptów i wszystkie arkusze stylów powinny zostać dodane w sekcji <head> naszego dokumentu, aby to zrobić wystarczy wywołać metody script lub stylesheet z klasy JHTML. Konstrukcja wywołania tych metod wygląda mniej więcej tak:

//Dodawanie JS do strony
//$sciezka domyslnie wskazuje na: 'media/system/js/'
JHTML::script($plik,$sciezka,$motools);
//Dodawanie CSS do strony
//$sciezka domyslnie wskazuje na: 'media/system/css/'
JHTML::stylesheet($plik,$sciezka);

Należy zauważyć, że $plik to tylko nazwa pliku np. "szablon.css", nie zaś cała ścieżka dostępu. Jeżeli $motools jest ustawione na true, Joomla sam zadba o to, aby biblioteka motools została załadowana. Niekiedy powyższe metody okażą się zupełnie bezużyteczne, np. gdybyś zechciał dodać JavaScript znajdujący się na innym serwerze. Na szczęście jest na to sposób. Najpierw musimy uzyskać dostęp do obiektu aktywnego dokumentu:

$dokument=& JFactory::getDocument();

Następnie możemy użyć metody addScript, argument $url określa adres naszego skryptu:

$dokument->addScript($url);

Metoda addScript, przyjmuje dwa parametry. Drugi parametr type jest opcjonalny, i domyślnie jest to "text/javascript".

Jeżeli chcemy dodać arkusz stylów css, użyjemy metody addStyleSheet:

$dokument->addStyleSheet($url);

Metoda addStyleSheet, przyjmuje tak naprawdę cztery parametry, trzy z nich są opcjonalne.

$dokument->addStyleSheet($url,$typ,$media,$atrybuty);
  • $url - adres do pliku css
  • $typ - typ MIME (domyślnie "text/css")
  • $media - pozwala określić dla jakiego "medium" użyć dany styl, domyślnie NULL
  • atrybuty - tablica dodatkowych atrybutów dla tagu <style>

Powyższe metody są już wystarczające w większości przypadków, lecz może zdarzyć się tak, że zechcemy wygenerować arkusz CSS lub skrypt JavaScript w czasie działania skryptu. Rozwiązaniem tego problemu są metody addScriptDeclaration i addStyleDeclaration Zanim wywołamy którąś z powyższych metod, musimy uzyskać dostęp do obiektu dokumentu.

$document->addScriptDeclaration($javascript, $type);

metoda addScriptDeclaration przyjmuje dwa parametry: pierwszy to nasz skrypt, drugi to typ (domyślnie "text/javascript"). Przykład użycia:

 function generujAlert($tekst){
  $alert="alert($tekst)";
  return $alert;
 }
$dokument=& JFactory::getDocument();
$dokument->addScriptDeclaration(generujAlert("Alert 1"));

Metoda addStyleDeclaration wygląda bardzo podobnie:

$document->addStyleDeclaration($styl, $type);

Pomimo użyteczności i elastyczności wszystkich tych metod, mogą one okazać się niewystarczające, gdy na przykład chcielibyśmy dodać arkusz stylów tylko dla przeglądarki Internet Explorer 6. Wówczas możemy skorzystać z metody addCustomTag w ten sposób:

$headTag="<!--[if IE 6]>\n";
$headTag.="<link rel=\"stylesheet\" href=\"ie6.css\" />\n";
$headTag.="<![endif]-->\n";
$dokument=& JFactory::getDocument();
$dokument->addCustomTag($headTag);
© Ten materiał jest dokładnym albo swobodnym tłumaczeniem artykułu http://docs.joomla.org/Adding_JavaScript_and_CSS_to_the_page udostępnionego na licencji JEDL na witrynie: Joomla! Official Documentation Wiki

Dziękujemy za wkład

» Stefan Wajda [zwiastun],