jQuery in TYPO3 nutzen

45,448 views
45,062 views

Published on

Update 2011-12-06: Fallstricke und Probleme erweitert, weiteres Plugin Beispiel eingefügt

------

Update 2011-12-03: Neueres TypoScript, jQuery Plugin erstellen, Mehr Beispiele

------

jQuery macht TYPO3 noch besser und dynamischer. Vortrag richtet sich an Beginner bis Fortgeschrittene.

Agenda:
Einführung
Warum jQuery
Einbindung in TYPO3
Aufbau eines Aufrufs
Selektoren
Events
Funktionen
AJAX in jQuery
Plugin selber erstellen
Mögliche Probleme
Showcase
Links
Books

Published in: Technology
3 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total views
45,448
On SlideShare
0
From Embeds
0
Number of Embeds
651
Actions
Shares
0
Downloads
233
Comments
3
Likes
9
Embeds 0
No embeds

No notes for slide

jQuery in TYPO3 nutzen

  1. 1. Wir leben TYPO3 jQuery in TYPO3 nutzenWir leben TYPO3 In2code.de
  2. 2. Was machen die bei in2code? Stefan BusemannExtbase David Richter Markus Rodler Workshops Tina Gasteiger TYPO3 Alex Kellner Security Consulting Wir leben TYPO3 Wir unterstützen TYPO3- , Internet- und Full-Service-Agenturen genauso wie große und mittelgroße Firmen, die auf TYPO3 Spezialwissen angewiesen sind. Entwicklung Performance Michael Cannon Martin Huber Extensions FLOW3 Marcus Schwemer Fluid Wir leben TYPO3 In2code.de
  3. 3. AgendaWir leben TYPO3 In2code.de
  4. 4. Agenda• Erklärung • AJAX in jQuery• Warum jQuery • Plugin selber erstellen• Einbindung in TYPO3 • Interessante jQuery Plugins• Aufbau eines Aufrufes • Fallstricke & Probleme• Selektoren • Showcase• Events • Links• Funktionen • BooksWir leben TYPO3 In2code.de
  5. 5. EinführungWir leben TYPO3 In2code.de
  6. 6. jQuery, JavaScript, HTML, PHP? Serverseitige Scriptsprache z.B. PHP mit TYPO3 „Guten Morgen“ „Morgen“ „Guten Abend“ PHP HTML HTML JavaScript Clientseitige Scriptsprache z.B. JavaScript mit jQuery Wir leben TYPO3 In2code.de
  7. 7. Was ist jQuery?jQuery ist ein freies, umfangreichesJavaScript-Framework, das komfortable Veröffentlicht vonFunktionen zur DOM-Manipulation John Resig bereits im(Document Object Model) zur Verfügung Januar 2006 auf einemstellt. Bar Camp in New York• Elementselektion im DOM• DOM-Manipulation• Erweitertes Event-System• Hilfsfunktionen (z.B. each)• Effekte und Animationen• Ajax-Funktionalitäten• Zahlreiche frei verfügbare Plugins• Beliebige ErweiterbarkeitWir leben TYPO3 In2code.de
  8. 8. Warum jQuery? Stimmen aus dem Netz „Leute! jQuery ist der HAMMER!!!“ typo3.sfroemken.de „bin … sehr begeistert von jQuery“ webthreads.de „ jQuery hat … Javascript mittlerweile ersetzt“ webdesignblog.de „Tschüss MooTools. Hallo jQuery!“ datenkind.de„ jQuery can do pretty much everything Prototype can do”webmaster-source.com „ …dass jQuery einfach nur geil ist“ macuser.deWir leben TYPO3 In2code.de
  9. 9. Warum jQuery? In eigenen Worten• jQuery ist kinderleicht• Zeit und Code sparen „write less, do more.“• Große Flexibilität in Selektoren• Vielzahl an Funktionen• Einfachste AJAX Integration• Lange Liste an verfügbaren PluginsWir leben TYPO3 In2code.de
  10. 10. jQuery In TYPO3 einbindenWir leben TYPO3 In2code.de
  11. 11. jQuery in TYPO3 einbinden1. Manuell vom eigenen Server(zuvor Download von jquery.com)Einbindung in HTML Head Bereich über TypoScript:page.includeJS.jquery = fileadmin/jquery.min.jsEinbindung am Ende des HTML Bereich über TypoScript:page.includeJSFooter.jquery = fileadmin/jquery.min.jsVorteile: Einbindung im Footerbereich performanterWir leben TYPO3 In2code.de
  12. 12. jQuery in TYPO3 einbinden2. Einbinung direkt über Googlepage.includeJSFooter.jquery.external = 1page.includeJSFooter.jquery =https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.jsNeueste https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js1.x.x Version (derzeit 1.7.1)Neueste https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js1.6.x Version (derzeit 1.6.4)Exakt https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.jsVersion 1.6.3Vorteile: Performance wenn viele Internetseiten ähnliche Einbindungnutzen, Spart dem Entwickler Zeit bei der EinbindungWir leben TYPO3 In2code.de
  13. 13. jQuery in TYPO3 einbinden3. Einbindung über TYPO3 Extension t3jquery# Von TYPO3 Erweiterung t3jqueryincludeLibs.t3jquery = EXT:t3jquery/class.tx_t3jquery.phppage.1 = USERpage.1.userFunc = tx_t3jquery->addJqJSVorteile: Einfache Einbindung für AnfängerWir leben TYPO3 In2code.de
  14. 14. jQuery in TYPO3 einbinden (eigene Scripte)Neben der Einbindung des jQuery Frameworks muss in der Regeleigenes JavaScript zum Einsatz kommen. Eine Einbindung empfiehltsich als eigene Datei nach der Einbindung von jQuery.Beispieleinbindung der eigenen Datei script.js:page.includeJSFooter.jquery.external = 1page.includeJSFooter.jquery =https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.jspage.includeJSFooter.myjavascript = fileadmin/script.jsWir leben TYPO3 In2code.de
  15. 15. Erstes Script mit jQueryIn einem ersten kurzen jQuery Script wollen wir alle Überschriften vomTyp H1 von Beginn an ausblenden. Hierzu legen wir eine Datei(script.js) im fileadmin Ordner von TYPO3 ab (Einbindung siehevorherige Folie).jQuery(document).ready(function($) { $(h1).hide();})Anmerkung: Unser eigentlicher Aufruf ist in der ready() Funktion vonjQuery gekapselt. Dies sorgt dafür, dass unsere Anweisung erstausgeführt wird, wenn der komplette DOM geladen ist. Andernfallskann es zu unerwünschten Nebeneffekten kommen.Wir leben TYPO3 In2code.de
  16. 16. jQuery Aufbau eines AufrufsWir leben TYPO3 In2code.de
  17. 17. Grundlegender Aufbau Selektor$(element).click(function() {{{$(element).click(function()$(element).click(function() $(element).hide(); $(element).hide();}) Funktion EventWir leben TYPO3 In2code.de
  18. 18. jQuery Scripte selber ausprobierenhttp://jsbin.comWir leben TYPO3 In2code.de
  19. 19. jQuery SelektorenWir leben TYPO3 In2code.de
  20. 20. Selektion - ID// Ausgewähltes Element mit bestimmter ID$(#container).hide();<div id="container"> <ul class="list"> <li><a href="#">Home</a></li> <li><a href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> </ul></div>Wir leben TYPO3 In2code.de
  21. 21. Selektion - Klasse// Ausgewählte Element mit bestimmter Klasse$(.list).hide();<div id="container"> <ul class="list"> <li><a href="#">Home</a></li> <li><a href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> </ul></div>Wir leben TYPO3 In2code.de
  22. 22. Selektion - Tag// Alle li-Tags$(li).hide();<div id="container"> <ul class="list"> <li><a href="#">Home</a></li> <li><a href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> </ul></div>Wir leben TYPO3 In2code.de
  23. 23. Selektion - Verschachtelung// Verschachtelung ähnlich wie CSS$(div#container .list).hide();<div id="container"> <ul class="list"> <li><a href="#">Home</a></li> <li><a href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> </ul></div>Wir leben TYPO3 In2code.de
  24. 24. Selektion – Erstes/Letztes Element// Erstes Kindelement$(li:first).hide();// Letztes Kindelement$(li:last).hide();<div id="container"> <ul class="list"> <li><a href="#">Home</a></li> <li><a href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> </ul></div>Wir leben TYPO3 In2code.de
  25. 25. Selektion – Odd/Even// Jedes zweite Element („Zebratabelle“)$(li:even).addClass(even);$(li:odd).addClass(odd);<div id="container"> <ul class="list"> <li><a href="#">Home</a></li> <li><a href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> </ul></div>Wir leben TYPO3 In2code.de
  26. 26. Selektion - ÜberblickSelektion Beschreibung* Alle Selektionenelement Alle Tagsparent > child Eltern- > Kindelement (nur direkte Kindelemente)#id Element mit bestimmter ID.class Element mit bestimmter Klasse:image Bestimmte Felder (:text :submit :radio :reset :checkbox):disabled Alle ausgeschalteten (Input) Felder:contains(text) Alle Selektionen mit einem gewissen Text:first-child Erstes Kindelement:last-child Letztes Kindelement:has(selector) Alle Elemente, die gewisse Kindelemente beinhaltenVolle Liste unter http://api.jquery.com/category/selectors/Wir leben TYPO3 In2code.de
  27. 27. jQuery EventsWir leben TYPO3 In2code.de
  28. 28. Events - Überblick// on Click Beispiel$(#container).click(function() { alert(xyz);});Funktion Beschreibungready() Sobald ein Element vollständig geladen wurdeclick() Bei Maus-Klick auf ein Elementmouseover() Bei Mouse-Over über einem Elementmouseout() Sobald der Cursor ein Element verlässtblur() Sobald ein Element den Fokus wieder verliert (Bsp. Input- Feld)change() Bei Änderung eines Feldes (Bsp. Input-Feld)scroll() Sobald der User auf der aktuellen Seite scrolltVolle Liste unter http://api.jquery.com/category/events/Wir leben TYPO3 In2code.de
  29. 29. jQuery FunktionenWir leben TYPO3 In2code.de
  30. 30. Funktionen – hide / show$(#hide).click(function() { $(#element).hide();});$(#show).click(function() { $(#element).show();}); Ich bin das Ich bin das Element mit Element mit der ID der ID „element“ „element“ ZeitWir leben TYPO3 In2code.de
  31. 31. Funktionen – fadeIn / fadeOut$(#show).click(function() { $(#element).fadeIn(slow);});$(#hide).click(function() { $(#element).fadeOut (slow);}); Ich bin das Ich bin das Ich bin das Ich bin das Element mit Element mit Element mit Element mit der ID der ID der ID der ID „element“ „element“ „element“ „element“ ZeitWir leben TYPO3 In2code.de
  32. 32. Funktionen – slideToggle// open and close$(#toggle).click(function() { $(#element).slideToggle(slow);}); Ich bin das Ich bin das Ich bin das Element mit Element mit der ID der ID „element“ „element“ ZeitWir leben TYPO3 In2code.de
  33. 33. Funktionen – animate$(#animation).click(function() { $(#element).animate({top: +=100}, 200);}); Ich bin das Element mit der ID Ich bin das „element“ Element mit Ich bin das der ID Element mit „element“ der ID „element“ ZeitWir leben TYPO3 In2code.de
  34. 34. Funktionen – addClass / removeClass$(#event1).click(function() { $(#element).addClass(red);});$(#event2).click(function() { $(#element).removeClass(red);}); Ich bin das Ich bin das Ich bin das Element mit Element mit Element mit der ID der ID der ID „element“ „element“ „element“ ZeitWir leben TYPO3 In2code.de
  35. 35. Funktionen – attr$(#changeTitle).click(function() { $(img.title).attr(title, Richtig gutes Bild);}); <img src="dog.jpg" /> <img src="dog.jpg" title="Richtig gutes Bild" /> ZeitWir leben TYPO3 In2code.de
  36. 36. Funktionen – html$(#element).click(function() { $(#element).html(Dummycontent);}); Ich bin das Element mit Dummycontent der ID „element“ ZeitWir leben TYPO3 In2code.de
  37. 37. Effekt-Funktionen - ÜberblickFunktionen Beschreibunganimate() Ablauf verschiedener CSS-ÄnderungenfadeIn() Einblenden von ElementenfadeOut() Ausblenden von ElementenfadeTo() Ein/Ausblenden bis zu einem gewissen Punktdelay() Verzögerungsfunktionhide() display:none;show() display:block;slideUp() Auffahren eines ElementesslideDown() Zufahren eines ElementesslideToggle() Auf- oder Zufahren eines Elementes (je nach Zustand)Volle Liste unter http://api.jquery.com/category/effects/Wir leben TYPO3 In2code.de
  38. 38. AJAX in jQueryWir leben TYPO3 In2code.de
  39. 39. Was ist AJAX?Asynchronous JavaScript And XMLAsynchrone Datenübertragungzwischen Browser und Server.Ermöglicht HTTP-Anfragendurchzuführen während eineHTML-Seite angezeigt wird, und PHPdie Seite zu verändern, ohne sie HTMLkomplett neu zu laden. POST/GET XML/HTML Registrierungsformular JavaScript Vorname Benutzername Alex schon vergeben Passwort Wir leben TYPO3 In2code.de
  40. 40. AJAX in jQuery – Erstes BeispielTestinhalt test.txt$(a.ajax).click(function(){ $.ajax({ url: test.txt, success: function(text) { alert(Text geladen: + text); } });});Text geladen: TestinhaltWir leben TYPO3 In2code.de
  41. 41. AJAX in jQuery – Username ok?Gewünschter Benutzername:<form id="form"> … <input type="text" name="username" id="username" /> …</form>Wir leben TYPO3 In2code.de
  42. 42. AJAX in jQuery – Username ok?$("#username").blur(function() { $.ajax({ url: validUsername.php , data: $(#form).serialize(), success: function(returnData) { if (returnData != ok) { alert(Username bereits vergeben); } } });});Wir leben TYPO3 In2code.de
  43. 43. AJAX in jQuery – Username ok?…$res = $GLOBALS[TYPO3_DB]->exec_SELECTquery ( fe_users.uid‚ fe_users.username = . $GLOBALS[TYPO3_DB]->fullQuoteStr($_POST[username]), , , 1);$row = $GLOBALS[TYPO3_DB]->sql_fetch_assoc($res);if ($row[uid]>0) { $content = Not ok;} else { $content = ok;}…Username bereits vergebenWir leben TYPO3 In2code.de
  44. 44. AJAX in TYPO3 nutzenUm AJAX Requests schnell und performant in TYPO3 verarbeiten zukönnen, empfiehlt sich der Einsatz sogenannter eID Scripts.Links zum Thema eID innerhalb TYPO3 nutzenhttp://www.typo3-tutorials.org/tutorials/extensions/eid-mechanismus.htmlhttp://typo3.sfroemken.de/typo3-tutorials/eid-und-ajax/eid-beispiele.htmlhttp://www.blogix.net/2009/02/08/typo3-eid-oder-daten-mit-ajax-anfordern/Wir leben TYPO3 In2code.de
  45. 45. jQuery Plugin selber erstellenWir leben TYPO3 In2code.de
  46. 46. jQuery Plugin erstellen - AccordionAnhand dem Wunsch nach einer eigenen Accordion Erweiterung erstellen wirunser erstes Plugin – das soll das Plugin können:Innere Texte zugeklappt, Erster Text am Anfang sichtbar, Bei Klick aufÜberschrift fahren alle Texte zu und der nächstgelegende Text soll auffahren<div id="accordion"> <div> <h1>Title 1</h1> <div>Aufklappbarer Seiteninhalt 1</div> </div> <div> <h1>Title 2</h1> <div>Aufklappbarer Seiteninhalt 2</div> </div></div>Wir leben TYPO3 In2code.de
  47. 47. jQuery Plugin erstellen - AccordionZwei mögliche Plugin Grundstrukturen können unseren künftigen Code kapseln// Struktur 1$.fn.plugin = function(){ // Plugin-Code}// Struktur 2(function($){ $.fn.plugin = function(){ // Plugin-Code }})(jQuery);Wir leben TYPO3 In2code.de
  48. 48. jQuery Plugin erstellen - AccordionAufruf des zu erstellenden Plugins accordion()jQuery(document).ready(function($) { $(#accordion).accordion();})Wir leben TYPO3 In2code.de
  49. 49. jQuery Plugin erstellen - AccordionPlugin Funktion schreiben Parameter im$.fn.accordion = function(){ Plugin fest var accordion = $(this); definiert var tag = h1; var speed = 500; $(this).children(div).children(div).hide(); // hide all div $(this).children(div:first).children(div).show(); // show first $(this).children(div).children(tag).click(function() { $(accordion).children(div).children(div). slideUp(speed); // hide all div $(this).next().slideDown(speed); // show div })}Wir leben TYPO3 In2code.de
  50. 50. jQuery Plugin erstellen - AccordionAufruf des zu erstellenden Plugins tooltip() mit ParameternjQuery(document).ready(function($) { $(#accordion).accordion({ tag: h1, speed: 200 });})Wir leben TYPO3 In2code.de
  51. 51. jQuery Plugin erstellen - Accordion$.fn.accordion = function(options){ Parameter default var accordion = $(this); Werte wenn keine options = $.extend({ Übergeben tag: h1, wurden speed: 500 }, options); $(this).children(div).children(div).hide(); // hide all div $(this).children(div:first).children(div).show(); // show first $(this).children(div).children(options.tag).click(function() { $(accordion).children(div).children(div). slideUp(options.speed); // hide all div $(this).next().slideDown(options.speed); // show div })}Wir leben TYPO3 In2code.de
  52. 52. jQuery Plugin erstellen - TabEin anderes Beispiel ist die Erstellung eines Tab Plugins:Es soll jeweils nur ein Inhaltselement sichtbar sein. Oberhalb des sichtbarenElements sind alle Überschriften nebeneinander dargestellt. Bei Klick auf dieReiternavigation ändert sich der jeweilige Inhalt. Beispiel HTML:<div class="tab"> <div> <h3>Der erste Titel</h3> <div>Inhalt DIV 1</div> </div> <div> <h3>zweiter Titel</h3> <div>Inhalt DIV 1</div> </div> <div> <h3>Letzter Titel</h3> <div>Inhalt DIV 1</div> </div></div>Wir leben TYPO3 In2code.de
  53. 53. jQuery Plugin erstellen - Tab$.fn.tabs = function(options) { options = $.extend({ tabTag: h3 Funktionen im }, options); var tabElement = $(this); Plugin bieten tabElement.prepend(generateMenu()); // create menu tabElement.children(div).hide(); // hide all items logische Einheiten tabElement.children(div).first().show(); // show first child $(.tabmenu li).click(function() { $(.tabmenu li).removeClass(act); // remove act class $(this).addClass(act); // add act clas to current clicked item tabElement.children(div).hide(); // hide all index = $(.tabmenu li).index($(this)); // index of clicked item tabElement.children(div).slice(index, index + 1).show(); // show index item }); function generateMenu() { var menu = ; menu += <ul class="tabmenu">; $(.tab + options.tabTag).each(function(i) { if (i === 0) { menu += <li class="act">; } else { menu += <li>; } menu += $(this).html(); }); menu += </li>; // Aufruf mit menu += </ul>; $(.tab).tabs(); return menu; }};Wir leben TYPO3 In2code.de
  54. 54. Interessante jQuery PluginsWir leben TYPO3 In2code.de
  55. 55. Interessante Plugins – Cycle Plugin<div class="bilder"> <img src="bild1.jpg" /> <img src="bild2.jpg" /></div>$(document).ready(function() { $(.bilder).cycle({ fx: fade, speed: 8000 });}); ZeitPlugin unter http://jquery.malsup.com/cycle/Wir leben TYPO3 In2code.de
  56. 56. Interessante Plugins – Superfish Menu<ul class="menu"> <li><a href="#">TYPO3</a> <ul><li>…</li></ul> </li></ul>$(ul.menu).superfish(); ZeitPlugin unter http://plugins.jquery.com/project/SuperfishWir leben TYPO3 In2code.de
  57. 57. Interessante Plugins – jQuery Tooltip Plugin<div class="product1">Produktname</div><div class="description1">Produktbeschreibung</div>$(.tooltip).tooltip();Plugin unter http://intekhabrizvi.wordpress.com/Wir leben TYPO3 In2code.de
  58. 58. Interessante Plugins – jCarousel<ul id="jcarousel"> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li></ul>$(#jcarousel).jcarousel();Plugin unter http://sorgalla.com/jcarousel/Wir leben TYPO3 In2code.de
  59. 59. Interessante Plugins – datePicker<input type="text" class="date" />$(.date).datepicker();Plugin unter http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/Wir leben TYPO3 In2code.de
  60. 60. Interessante Plugins – dropShadow<div class="shadow">Content</div>$(".shadow").dropShadow();Plugin unter http://plugins.jquery.com/project/DropShadowWir leben TYPO3 In2code.de
  61. 61. Interessante Plugins – inline form validation<form class="validation"> <input class="validate[required],length[0,100]]"name="firstname" type="text" /></form>$(.validation).validationEngine();Plugin unter http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/Wir leben TYPO3 In2code.de
  62. 62. Interessante Plugins – dataTables<table> <thead><tr><th>Spalte1</th><th>Spalte2</th></tr></thead> <tr><td>Zelle1</td><td>Zelle2</td></tr></table>$(#table).dataTable();Plugin unter http://datatables.netWir leben TYPO3 In2code.de
  63. 63. jQuery Fallstricke und ProblemeWir leben TYPO3 In2code.de
  64. 64. Probleme – Klick auf Link – Reload verhindernProblem:Klick auf Link erzeugt einen Seitenreload…Gerade in Verbindung mit AJAX Requests möchte maneinen Reload im Browser möglicherweise verhindern.<div> <a href="ziel.html">Link</a></div>Lösung:Verwendung von preventDefault()$(a).click(function(e) { e.preventDefault(); // weiter ohne Seitenreload});Wir leben TYPO3 In2code.de
  65. 65. Probleme – Klick-Vererbung verhindernProblem:Unter Umständen wird ein Klick-Event nach oben vererbtIn unten stehendem Beispiel werden bei Klick auf „Link“ beideEvents aufgerufen, was eventuell ungewollt ist.<div class="container "> $(.container).click(function() { alert(click1); Text }); <span>Link</span> $(span).click(function() { alert(click2);</div> });Lösung:Verwendung von stopPropagination()…$(span).click(function(e) { e.stopPropagination(); alert(click2);});Wir leben TYPO3 In2code.de
  66. 66. Probleme – Events bei geladenen ObjektenProblem:Nachgeladene DOM-Objekte haben keinen Eventhandler… // In div.nachgeladen wird<div class="nachgeladen"> // „<span>Link</span>“ <span>Link</span> // per AJAX geladen und eingefügt …</div> $(span).click(function() {… alert(click); });Lösung:Verwendung von live()…$(span).live(click, function() { alert(click);});Wir leben TYPO3 In2code.de
  67. 67. Probleme – Separierung auf BrowserProblem:Browser in IF-Abfrage…Wenn JavaScript in Abhängigkeit von Browser und Versionausgeführt werden soll.Lösung:Verwendung von $.browser// wenn IE7if ($.browser.msie && $.browser.version == 7) { // Ausführbarer JavaScript Code}Wir leben TYPO3 In2code.de
  68. 68. Probleme – Stilles DebuggingProblem:Ausgabe von ganzen Arrays oder ObjektenOhne aufdringliche Alerts lassen sich ganze Objekte, Arrays undStrings über die Konsole (in z.B. Firebug) auswerten.Lösung:Verwendung von console.log()in der Browserkonsole (F12 für viele Browser)// Debugging von strings, arrays und objects in JavaScriptconsole.log($.browser);console.log(xyz);Wir leben TYPO3 In2code.de
  69. 69. Probleme – andere JavaScript FrameworksProblem:jQuery vs. Mootools vs. Prototype vs. etc…Verwendung des $-Zeichens in verschiedenen Frameworks führtzwangsweise zu Konflikten$(document).ready(function($) { $(#element).hide();});Lösung:Verwendung des No-Conflict Mode$.noConflict();jQuery(document).ready(function($) { $(#element).hide();});Wir leben TYPO3 In2code.de
  70. 70. Probleme – BarrierefreiheitProblem:Keine Linkauszeichnung$(div.element).click(function() { window.location = "http://www.typo3.org";});Lösung:Linkauszeichnung als solche durchführen$(a.element).click(function() { window.location = "http://www.typo3.org";});Wir leben TYPO3 In2code.de
  71. 71. jQuery ShowcaseWir leben TYPO3 In2code.de
  72. 72. Menü auffahren Suche oder Kontaktformular bei Mouseover anzeigen in2code.de Teaser bei Mouseover anzeigen Inhalt des Footers per AJAX austauschenWir leben TYPO3 In2code.de
  73. 73. Elemente per AJAX nachladen Bearbeitungs elemente sichtbar bei Mouseover Drag and Drop um Sortierung zu ändern fh-rosenheim.deWir leben TYPO3 In2code.de
  74. 74. Produkt Box FadeOut zuklappen Menü auffahren conject.com Logos überblende n News Karussell Tab Menü TooltipsWir leben TYPO3 In2code.de
  75. 75. jQuery LinksWir leben TYPO3 In2code.de
  76. 76. Links – Allgemein zu jQueryjQuery Referenz:http://docs.jquery.comjQuery Plugins:http://plugins.jquery.comCheatsheet (printable PDF):http://labs.impulsestudios.ca/downloads/impulse_studios-jquery_cheat_sheet-1.0.pdfjQuery Blog:http://usejquery.com/jQuery List:http://jquerylist.com/jQuery für Anfänger von Patrick Lobacher:http://www.slideshare.net/plobacher/jquery-fr-anfngerWir leben TYPO3 In2code.de
  77. 77. Links – TYPO3 Extensions mit jQueryExtension Key Beschreibungperfectlightbox TYPO3 Lightbox mit Auswahl des Frameworks (jQuery, Prototype, Mootoools)t3jquery jQuery Framework und Plugins als Basis für Erweiterungenjfmulticontent Multicontent mit Tabs, Slider und Accordionimagecarousel Coole Bildgalerie (Imagecarousel)me_google_calend Google Kalender mit jQueryarjfcloudzoom Zoom für Bilder im Frontendrzpopeye Inline Lightboxjq_pass_strength Passwort-Stärke-Anzeigepowermail Formvalidierung über jQueryWir leben TYPO3 In2code.de
  78. 78. jQuery BooksWir leben TYPO3 In2code.de
  79. 79. Books – EmpfehlungenjQuery Kochbuch (von jQuery Community Experts)„In diesem Buch werden Sie die wesentlichenMöglichkeiten lernen, wie Sie jQuery für Ihre eigenenWebapplikationen nutzen können - von einfachenWebseiten, die nur um einzelne Effekte aufgewertetwerden sollen bis hin zu komplexen RIAS.“jQuery: Das neue JavaScript-Framework fürinteraktives Design (von Ralph Steyer)„Mit den Rezepten aus dem Buch lernen Siepraxisbewährte Lösungen von einem Dutzend derführenden Entwickler, die jQuery für wirklich alleseinsetzen: von der Integration simpler Komponentenin Webseiten bis hin zur Entwicklungkomplexer, hochperformanter User-Schnittstellen.“Wir leben TYPO3 In2code.de
  80. 80. jQuery oder TYPO3 Schulung gesucht?Wir leben TYPO3 In2code.de
  81. 81. http://www.in2code.de/typo3-schulung/Wir leben TYPO3 In2code.de
  82. 82. Vielen Dank Wir leben TYPO3 In2code.dein2code.de In2code.

×