- jQuery++: jQuery Hilfsklassen, um beispielsweise mit Cookies komfortabel zu hantieren.
- 3 jQuery Plugins für schönere Typografie
- 5 kostenlose jQuery-Bildergalerien für Responsive Webdesign
- jQuery Boilerplate: Schnellstart bei der Plugin-Entwicklung
- jCanvas – Manipulation des Canvas-Elements mit jQuery
- Hyphenator.js – Silbentrennung auf Websites
Tag-Archiv für 'jQuery'
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.
Das Problem macht sich durch folgende Fehlermeldung bemerkbar:
Ungültiges aufrufendes Objekt. jquery-1.6.1.js, Zeile 5569 Zeichen 5
Lösung: DivX Plugin deaktivieren.
Ich habe in den letzten Tagen wegen eventuell anstehender Aufträge im Bereich T3 Websites für mobile devices mich mal mit dem Thema beschäftigt und ein wenig mit meiner eigenen Website herumgespielt. Unter anderem habe ich folgende Tätigkeiten bis jetzt durchgeführt:
- Multiweb in TYPO3 eingerichtet, um eine eigene Microsite mit optimierten Inhalten anzulegen. Man kann natürlich versuchen die Inhalte im normalen Web via CSS für alle Medien zu optimieren. Bei größeren Webs mit verschiedenen Medien (Videos, Bildergalerien, …) hat dies jedoch so seine Grenzen. Daher die Lösung mit der Microsite.
- Umleitung per Extension
- Robots.txt
Je nach Domain wird eine andere robots.txt angezeigt. Das mobile Web soll ja nicht indexiert werden.
- TemplaVoila HTML5 Template erzeugt
- Spezielle Sitemap zur Erzeugung der Menüs
- Formular mit powermail erzeugt: http://m.wapplersystems.de/service/kontakt/
Das Web ist auf http://m.wapplersystems.de zu sehen. Die Inhalte sind nur schnell von mir eingetragen worden. Wenn ich mal Zeit habe, werden die noch verbessert.
What do I need?
- The history plugin of the ajaxy project
- Using tabs and history events for data exchange between tabs and history plugin.
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
‘Making jQuery UI tabs (aka tabs 3) bookmarkable’ weiterlesen