Click here to load reader

jQuery in TYPO3 nutzen

  • View
    42.315

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Text of jQuery in TYPO3 nutzen

  • 1. Wir leben TYPO3jQueryin TYPO3 nutzenWir leben TYPO3In2code.de

2. Was machen die bei in2code?Stefan BusemannExtbaseDavid RichterMarkus RodlerWorkshopsTina Gasteiger TYPO3 Alex KellnerSecurityConsultingWir leben TYPO3Wir untersttzen TYPO3- , Internet-und Full-Service-Agenturengenauso wie groe und mittelgroeFirmen, die auf TYPO3Spezialwissen angewiesen sind.EntwicklungPerformanceMichael Cannon Martin Huber Extensions FLOW3 Marcus SchwemerFluid Wir leben TYPO3In2code.de 3. AgendaWir leben TYPO3In2code.de 4. Agenda Erklrung 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 TYPO3In2code.de 5. EinfhrungWir leben TYPO3In2code.de 6. jQuery, JavaScript, HTML, PHP? Serverseitige Scriptsprache z.B. PHP mit TYPO3 Guten MorgenMorgen Guten AbendPHP HTMLHTMLJavaScriptClientseitige Scriptsprache z.B. JavaScript mit jQuery Wir leben TYPO3 In2code.de 7. Was ist jQuery?jQuery ist ein freies, umfangreichesJavaScript-Framework, das komfortableVerffentlicht vonFunktionen zur DOM-ManipulationJohn Resig bereits im(Document Object Model) zur VerfgungJanuar 2006 auf einemstellt.Bar Camp in New York Elementselektion im DOM DOM-Manipulation Erweitertes Event-System Hilfsfunktionen (z.B. each) Effekte und Animationen Ajax-Funktionalitten Zahlreiche frei verfgbare Plugins Beliebige ErweiterbarkeitWir leben TYPO3In2code.de 8. Warum jQuery? Stimmen aus dem NetzLeute! jQuery ist der HAMMER!!!typo3.sfroemken.debin sehr begeistert von jQuerywebthreads.de jQuery hat Javascript mittlerweile ersetzt webdesignblog.deTschss MooTools. Hallo jQuery!datenkind.de jQuery can do pretty much everything Prototype can dowebmaster-source.com dass jQuery einfach nur geil istmacuser.deWir leben TYPO3In2code.de 9. Warum jQuery? In eigenen Worten jQuery ist kinderleicht Zeit und Code sparen write less, do more. Groe Flexibilitt in Selektoren Vielzahl an Funktionen Einfachste AJAX Integration Lange Liste an verfgbaren PluginsWir leben TYPO3 In2code.de 10. jQueryIn TYPO3 einbindenWir leben TYPO3In2code.de 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. 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. 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 fr AnfngerWir leben TYPO3 In2code.de 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 TYPO3In2code.de 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 dafr, dass unsere Anweisung erstausgefhrt wird, wenn der komplette DOM geladen ist. Andernfallskann es zu unerwnschten Nebeneffekten kommen.Wir leben TYPO3 In2code.de 16. jQueryAufbau eines AufrufsWir leben TYPO3In2code.de 17. Grundlegender Aufbau Selektor$(element).click(function() {{{$(element).click(function()$(element).click(function() $(element).hide(); $(element).hide();}) FunktionEventWir leben TYPO3 In2code.de 18. jQuery Scripte selber ausprobierenhttp://jsbin.comWir leben TYPO3In2code.de 19. jQuery SelektorenWir leben TYPO3 In2code.de 20. Selektion - ID// Ausgewhltes Element mit bestimmter ID$(#container).hide();

  • Home
  • Seite 1
  • Seite 2

Wir leben TYPO3In2code.de 21. Selektion - Klasse// Ausgewhlte Element mit bestimmter Klasse$(.list).hide();

  • Home
  • Seite 1
  • Seite 2

Wir leben TYPO3In2code.de 22. Selektion - Tag// Alle li-Tags$(li).hide();

  • Home
  • Seite 1
  • Seite 2

Wir leben TYPO3In2code.de 23. Selektion - Verschachtelung// Verschachtelung hnlich wie CSS$(div#container .list).hide();

  • Home
  • Seite 1
  • Seite 2

Wir leben TYPO3In2code.de 24. Selektion Erstes/Letztes Element// Erstes Kindelement$(li:first).hide();// Letztes Kindelement$(li:last).hide();

  • Home
  • Seite 1
  • Seite 2

Wir leben TYPO3In2code.de 25. Selektion Odd/Even// Jedes zweite Element (Zebratabelle)$(li:even).addClass(even);$(li:odd).addClass(odd);

  • Home
  • Seite 1
  • Seite 2

Wir leben TYPO3In2code.de 26. Selektion - berblickSelektion Beschreibung* Alle Selektionenelement Alle Tagsparent > childEltern- > Kindelement (nur direkte Kindelemente)#id Element mit bestimmter ID.classElement mit bestimmter Klasse:imageBestimmte Felder (:text :submit :radio :reset :checkbox):disabled Alle ausgeschalteten (Input) Felder:contains(text) Alle Selektionen mit einem gewissen Text:first-childErstes 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. jQuery EventsWir leben TYPO3 In2code.de 28. Events - berblick// on Click Beispiel$(#container).click(function() { alert(xyz);});FunktionBeschreibungready() Sobald ein Element vollstndig geladen wurdeclick() Bei Maus-Klick auf ein Elementmouseover() Bei Mouse-Over ber einem Elementmouseout()Sobald der Cursor ein Element verlsstblur()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. jQuery FunktionenWir leben TYPO3 In2code.de 30. Funktionen hide / show$(#hide).click(function() { $(#element).hide();});$(#show).click(function() { $(#element).show();});Ich bin das Ich bin dasElement mit Element mit der IDder ID element element ZeitWir leben TYPO3 In2code.de 31. Funktionen fadeIn / fadeOut$(#show).click(function() { $(#element).fadeIn(slow);});$(#hide).click(function() { $(#element).fadeOut (slow);});Ich bin das Ich bin dasIch bin das Ich bin dasElement mit Element mitElement mit Element mit der IDder ID der IDder ID element elementelement elementZeitWir leben TYPO3In2code.de 32. Funktionen slideToggle// open and close$(#toggle).click(function() { $(#element).slideToggle(slow);});Ich bin dasIch bin dasIch bin das Element mitElement mitder ID der IDelement elementZeitWir leben TYPO3In2code.de 33. Funktionen animate$(#animation).click(function() {$(#element).animate({top: +=100}, 200);});Ich bin dasElement mit der IDIch bin das element Element mitIch bin dasder IDElement mitelementder ID element ZeitWir leben TYPO3In2code.de 34. Funktionen addClass / removeClass$(#event1).click(function() {$(#element).addClass(red);});$(#event2).click(function() {$(#element).removeClass(red);});Ich bin dasIch bin dasIch bin dasElement mitElement mitElement mit der ID der ID der ID elementelementelement ZeitWir leben TYPO3 In2code.de 35. Funktionen attr$(#changeTitle).click(function() {$(img.title).attr(title, Richtig gutes Bild);});ZeitWir leben TYPO3In2code.de 36. Funktionen html$(#element).click(function() {$(#element).html(Dummycontent);});Ich bin dasElement mit Dummycontent der ID elementZeitWir leben TYPO3 In2code.de 37. Effekt-Funktionen - berblickFunktionenBeschreibunganimate() Ablauf verschiedener CSS-nderungenfadeIn()Einblenden von ElementenfadeOut() Ausblenden von ElementenfadeTo()Ein/Ausblenden bis zu einem gewissen Punktdelay() Verzgerungsfunktionhide()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. AJAX in jQueryWir leben TYPO3In2code.de 39. Was ist AJAX?Asynchronous JavaScript And XMLAsynchrone Datenbertragungzwischen Browser und Server.Ermglicht HTTP-Anfragendurchzufhren whrend eineHTML-Seite angezeigt wird, undPHPdie Seite zu verndern, ohne sie HTMLkomplett neu zu laden.POST/GETXML/HTMLRegistrierungsformular JavaScript Vorname Benutzername Alex schon vergeben Passwort Wir leben TYPO3In2code.de 40. AJAX in jQuery Erstes BeispielTestinhalt test.txt$(a.ajax).click(function(){ $.ajax({ url: test.txt, success: function(text) { alert(Text gela

Search related