Schlagwort-Archiv: jQuery

Nützliche Links zum Thema jQuery

jQuery, Prototype oder Scriptaculous in TYPO3 korrekt einbinden

JavaScript Bibliotheken wie jQuery, Prototype, Scriptacuouls oder Mootools bindet man am besten über die von TYPO3 mitgebrachten Funktionen zur Einbindung von JavaScript-Dateien ein. Früher habe ich Extensions für diese Arbeit verwendet, im Laufe der Zeit aber gemerkt, dass die Handhabung mit der Zeit zu unübersichtlich wurde, weil sich die Versionen zu schnell ändern und man jedes Mal sowieso auf die Kompatibilität achten muss, zudem andere Extension, die JavaScript-Bibliotheken wiederum voraussetzen diese eh nicht nutzen. Außerdem ist das Einbinden von diesen eine 5 Minuten-Sache und unterm Strich schneller als sich erst mal eine spezielle Extension zu besorgen.

Meine empfohlene Vorgehensweise:

  • In TYPO3 eine Seite vom Typ „Ordner“ anlegen, um die Templates übersichtlich verwalten zu können
  • In die Listenansicht wechseln und ein Template mit beispielsweise dem Namen „jQuery 1.7“ anlegen.
  • Das Template bearbeiten und in den setup-Bereich den folgenden Code eingeben. Es gibt hierfür verschiedene Befehle, die folgende Bedeutung haben.
includeJSlibs
Fügt eine JavaScript Bibliothek im Head-Bereich der Website ein.
includeJSFooterlibs
Fügt eine JavaScript Bibliothek am Ende kurz vor </body> ein. Wenn man alle JavaScripts am Ende der Seite verankert, wird der Aufbau der Seite beschleunigt.
  • Anschließend das neue Template im Haupttemplate der Website einbinden.

Hier ein Beispiel um jQuery am Ende der Seite einzubinden:

page.includeJSFooterlibs {
  jquery = fileadmin/pfad_zur_datei/jquery-1.7.min.js
  jquery.forceOnTop = 1
}

jQuery direkt von Google einbinden:

page.includeJSFooterlibs {
  jquery = http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
  jquery.external = 1
  jquery.forceOnTop = 1
}

JavaScript-Dateien einbinden

Normale JavaScript Dateien kann man über die Befehle includeJS und includeJSFooter einbinden.

Parameter

disableCompression JavaScript-Datei wird nicht komprimiert
forceOnTop Wird vor den anderen Dateien geladen
allWrap <script>-Befehl mit etwas umhüllen
excludeFromConcatenation Datei wird nicht mit den anderen Dateien zu einer großen Datei zusammengefügt
external Datei wird von einer anderen Domain geladen
type Normalerweise ‚text/javascript‘

 

Komprimierung

Die neuen TYPO3 Versionen kommen mit Packern, die die Dateien zu einer großen Datei zusammenfügt, um so die Anzahl der Anfragen an den Webserver zu reduzieren, und die Dateien komprimiert.

Making jQuery UI tabs (aka tabs 3) bookmarkable

What do I need?

That’s all. Now the hash will be updated if you select a tab and you can call a website with the hash and the tab will be focused automatically after loading.

Tested with

  • Firefox
  • IE 7, 8, other versions should also function
  • Safari

Weiterlesen