235-mal heruntergeladen
![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 vergeben
Wir leben TYPO3 In2code.de](https://image.slidesharecdn.com/jqueryimtypo3einsatz-100907062429-phpapp02/85/jQuery-in-TYPO3-nutzen-43-320.jpg)
![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](https://image.slidesharecdn.com/jqueryimtypo3einsatz-100907062429-phpapp02/85/jQuery-in-TYPO3-nutzen-61-320.jpg)
Hochgeladen vonAlex Kellner
jQuery in TYPO3 nutzen
Das Dokument diskutiert die Integration von jQuery in TYPO3 und bietet eine Einführung in die Grundlagen von jQuery sowie Beispielscripte für die Verwendung. Es wird erläutert, wie jQuery in TYPO3 eingebunden werden kann, einschließlich verschiedener Methoden, Ajax-Requests durchzuführen und eigene jQuery-Plugins zu erstellen. Zudem werden typische Selektoren, Ereignisse und Funktionen erläutert, um Entwicklern zu helfen, interaktive und dynamische Webanwendungen zu erstellen.
jQuery in TYPO3 nutzen
- 1. Wir leben TYPO3 jQuery in TYPO3 nutzen Wir leben TYPO3 In2code.de
- 2. Was machen diebei in2code? Stefan Busemann Extbase 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. Agenda Wir leben TYPO3 In2code.de
- 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 • Books Wir leben TYPO3 In2code.de
- 5. Einführung Wir leben TYPO3 In2code.de
- 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. Was ist jQuery? jQueryist ein freies, umfangreiches JavaScript-Framework, das komfortable Veröffentlicht von Funktionen zur DOM-Manipulation John Resig bereits im (Document Object Model) zur Verfügung Januar 2006 auf einem stellt. 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 Erweiterbarkeit Wir leben TYPO3 In2code.de
- 8. Warum jQuery? Stimmenaus 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.de Wir leben TYPO3 In2code.de
- 9. Warum jQuery? Ineigenen 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 Plugins Wir leben TYPO3 In2code.de
- 10. jQuery In TYPO3 einbinden Wir leben TYPO3 In2code.de
- 11. jQuery in TYPO3einbinden 1. Manuell vom eigenen Server (zuvor Download von jquery.com) Einbindung in HTML Head Bereich über TypoScript: page.includeJS.jquery = fileadmin/jquery.min.js Einbindung am Ende des HTML Bereich über TypoScript: page.includeJSFooter.jquery = fileadmin/jquery.min.js Vorteile: Einbindung im Footerbereich performanter Wir leben TYPO3 In2code.de
- 12. jQuery in TYPO3einbinden 2. Einbinung direkt über Google page.includeJSFooter.jquery.external = 1 page.includeJSFooter.jquery = https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js Neueste https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js 1.x.x Version (derzeit 1.7.1) Neueste https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js 1.6.x Version (derzeit 1.6.4) Exakt https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js Version 1.6.3 Vorteile: Performance wenn viele Internetseiten ähnliche Einbindung nutzen, Spart dem Entwickler Zeit bei der Einbindung Wir leben TYPO3 In2code.de
- 13. jQuery in TYPO3einbinden 3. Einbindung über TYPO3 Extension t3jquery # Von TYPO3 Erweiterung t3jquery includeLibs.t3jquery = EXT:t3jquery/class.tx_t3jquery.php page.1 = USER page.1.userFunc = tx_t3jquery->addJqJS Vorteile: Einfache Einbindung für Anfänger Wir leben TYPO3 In2code.de
- 14. jQuery in TYPO3einbinden (eigene Scripte) Neben der Einbindung des jQuery Frameworks muss in der Regel eigenes JavaScript zum Einsatz kommen. Eine Einbindung empfiehlt sich als eigene Datei nach der Einbindung von jQuery. Beispieleinbindung der eigenen Datei script.js: page.includeJSFooter.jquery.external = 1 page.includeJSFooter.jquery = https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js page.includeJSFooter.myjavascript = fileadmin/script.js Wir leben TYPO3 In2code.de
- 15. Erstes Script mitjQuery In einem ersten kurzen jQuery Script wollen wir alle Überschriften vom Typ H1 von Beginn an ausblenden. Hierzu legen wir eine Datei (script.js) im fileadmin Ordner von TYPO3 ab (Einbindung siehe vorherige Folie). jQuery(document).ready(function($) { $('h1').hide(); }) Anmerkung: Unser eigentlicher Aufruf ist in der ready() Funktion von jQuery gekapselt. Dies sorgt dafür, dass unsere Anweisung erst ausgeführt wird, wenn der komplette DOM geladen ist. Andernfalls kann es zu unerwünschten Nebeneffekten kommen. Wir leben TYPO3 In2code.de
- 16. jQuery Aufbau eines Aufrufs Wir leben TYPO3 In2code.de
- 17. Grundlegender Aufbau Selektor $('element').click(function() {{{ $('element').click(function() $('element').click(function() $('element').hide(); $('element').hide(); }) Funktion Event Wir leben TYPO3 In2code.de
- 18. jQuery Scripte selberausprobieren http://jsbin.com Wir leben TYPO3 In2code.de
- 19. jQuery Selektoren Wir lebenTYPO3 In2code.de
- 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. 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. 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. 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. Selektion – Erstes/LetztesElement // 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. 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. Selektion - Überblick Selektion Beschreibung * Alle Selektionen element Alle Tags parent > 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 beinhalten Volle Liste unter http://api.jquery.com/category/selectors/ Wir leben TYPO3 In2code.de
- 27. jQuery Events Wir lebenTYPO3 In2code.de
- 28. Events - Überblick //on Click Beispiel $('#container').click(function() { alert('xyz'); }); Funktion Beschreibung ready() Sobald ein Element vollständig geladen wurde click() Bei Maus-Klick auf ein Element mouseover() Bei Mouse-Over über einem Element mouseout() Sobald der Cursor ein Element verlässt blur() 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 scrollt Volle Liste unter http://api.jquery.com/category/events/ Wir leben TYPO3 In2code.de
- 29. jQuery Funktionen Wir lebenTYPO3 In2code.de
- 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“ Zeit Wir 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 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“ Zeit Wir leben TYPO3 In2code.de
- 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“ Zeit Wir leben TYPO3 In2code.de
- 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“ Zeit Wir leben TYPO3 In2code.de
- 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“ Zeit Wir leben TYPO3 In2code.de
- 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" /> Zeit Wir leben TYPO3 In2code.de
- 36. Funktionen – html $('#element').click(function(){ $('#element').html('Dummycontent'); }); Ich bin das Element mit Dummycontent der ID „element“ Zeit Wir leben TYPO3 In2code.de
- 37. Effekt-Funktionen - Überblick Funktionen Beschreibung animate() Ablauf verschiedener CSS-Änderungen fadeIn() Einblenden von Elementen fadeOut() Ausblenden von Elementen fadeTo() Ein/Ausblenden bis zu einem gewissen Punkt delay() Verzögerungsfunktion hide() display:none; show() display:block; slideUp() Auffahren eines Elementes slideDown() Zufahren eines Elementes slideToggle() 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 jQuery Wirleben TYPO3 In2code.de
- 39. Was ist AJAX? AsynchronousJavaScript And XML Asynchrone Datenübertragung zwischen Browser und Server. Ermöglicht HTTP-Anfragen durchzuführen während eine HTML-Seite angezeigt wird, und PHP die Seite zu verändern, ohne sie HTML komplett neu zu laden. POST/GET XML/HTML Registrierungsformular JavaScript Vorname Benutzername Alex schon vergeben Passwort Wir leben TYPO3 In2code.de
- 40. AJAX in jQuery– Erstes Beispiel Testinhalt test.txt $('a.ajax').click(function(){ $.ajax({ url: 'test.txt', success: function(text) { alert('Text geladen: ' + text); } }); }); Text geladen: Testinhalt Wir leben TYPO3 In2code.de
- 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. 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. 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 vergeben Wir leben TYPO3 In2code.de
- 44. AJAX in TYPO3nutzen Um AJAX Requests schnell und performant in TYPO3 verarbeiten zu können, empfiehlt sich der Einsatz sogenannter eID Scripts. Links zum Thema eID innerhalb TYPO3 nutzen http://www.typo3-tutorials.org/tutorials/extensions/eid-mechanismus.html http://typo3.sfroemken.de/typo3-tutorials/eid-und-ajax/eid-beispiele.html http://www.blogix.net/2009/02/08/typo3-eid-oder-daten-mit-ajax-anfordern/ Wir leben TYPO3 In2code.de
- 45. jQuery Plugin selber erstellen Wir leben TYPO3 In2code.de
- 46. jQuery Plugin erstellen- Accordion Anhand dem Wunsch nach einer eigenen Accordion Erweiterung erstellen wir unser 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. jQuery Plugin erstellen- Accordion Zwei 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. jQuery Plugin erstellen- Accordion Aufruf des zu erstellenden Plugins accordion() jQuery(document).ready(function($) { $('#accordion').accordion(); }) Wir leben TYPO3 In2code.de
- 49. jQuery Plugin erstellen- Accordion Plugin 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. jQuery Plugin erstellen- Accordion Aufruf des zu erstellenden Plugins tooltip() mit Parametern jQuery(document).ready(function($) { $('#accordion').accordion({ tag: 'h1', speed: 200 }); }) Wir leben TYPO3 In2code.de
- 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. jQuery Plugin erstellen- Tab Ein anderes Beispiel ist die Erstellung eines Tab Plugins: Es soll jeweils nur ein Inhaltselement sichtbar sein. Oberhalb des sichtbaren Elements sind alle Überschriften nebeneinander dargestellt. Bei Klick auf die Reiternavigation ä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. 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. Interessante jQuery Plugins Wir leben TYPO3 In2code.de
- 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 }); }); Zeit Plugin unter http://jquery.malsup.com/cycle/ Wir leben TYPO3 In2code.de
- 56. Interessante Plugins –Superfish Menu <ul class="menu"> <li><a href="#">TYPO3</a> <ul><li>…</li></ul> </li> </ul> $('ul.menu').superfish(); Zeit Plugin unter http://plugins.jquery.com/project/Superfish Wir leben TYPO3 In2code.de
- 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. 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. 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. Interessante Plugins –dropShadow <div class="shadow">Content</div> $(".shadow").dropShadow(); Plugin unter http://plugins.jquery.com/project/DropShadow Wir leben TYPO3 In2code.de
- 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. 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.net Wir leben TYPO3 In2code.de
- 63. jQuery Fallstricke und Probleme Wir leben TYPO3 In2code.de
- 64. Probleme – Klickauf Link – Reload verhindern Problem: Klick auf Link erzeugt einen Seitenreload… Gerade in Verbindung mit AJAX Requests möchte man einen 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. Probleme – Klick-Vererbungverhindern Problem: Unter Umständen wird ein Klick-Event nach oben vererbt In unten stehendem Beispiel werden bei Klick auf „Link“ beide Events 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. Probleme – Eventsbei geladenen Objekten Problem: 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. Probleme – Separierungauf Browser Problem: Browser in IF-Abfrage… Wenn JavaScript in Abhängigkeit von Browser und Version ausgeführt werden soll. Lösung: Verwendung von $.browser // wenn IE7 if ($.browser.msie && $.browser.version == 7) { // Ausführbarer JavaScript Code } Wir leben TYPO3 In2code.de
- 68. Probleme – StillesDebugging Problem: Ausgabe von ganzen Arrays oder Objekten Ohne aufdringliche Alerts lassen sich ganze Objekte, Arrays und Strings ü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 JavaScript console.log($.browser); console.log('xyz'); Wir leben TYPO3 In2code.de
- 69. Probleme – andereJavaScript Frameworks Problem: jQuery vs. Mootools vs. Prototype vs. etc… Verwendung des $-Zeichens in verschiedenen Frameworks führt zwangsweise 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. Probleme – Barrierefreiheit Problem: KeineLinkauszeichnung $('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. jQuery Showcase Wir leben TYPO3 In2code.de
- 72. Menü auffahren Suche oder Kontaktformular bei Mouseover anzeigen in2code.de Teaser bei Mouseover anzeigen Inhalt des Footers per AJAX austauschen Wir leben TYPO3 In2code.de
- 73. Elemente per AJAX nachladen Bearbeitungs elemente sichtbar bei Mouseover Drag and Drop um Sortierung zu ändern fh-rosenheim.de Wir leben TYPO3 In2code.de
- 74. Produkt Box FadeOut zuklappen Menü auffahren conject.com Logos überblende n News Karussell Tab Menü Tooltips Wir leben TYPO3 In2code.de
- 75. jQuery Links Wir leben TYPO3 In2code.de
- 76. Links – Allgemeinzu jQuery jQuery Referenz: http://docs.jquery.com jQuery Plugins: http://plugins.jquery.com Cheatsheet (printable PDF): http://labs.impulsestudios.ca/downloads/impulse_studios-jquery_cheat_sheet-1.0.pdf jQuery Blog: http://usejquery.com/ jQuery List: http://jquerylist.com/ jQuery für Anfänger von Patrick Lobacher: http://www.slideshare.net/plobacher/jquery-fr-anfnger Wir leben TYPO3 In2code.de
- 77. Links – TYPO3Extensions mit jQuery Extension Key Beschreibung perfectlightbox TYPO3 Lightbox mit Auswahl des Frameworks (jQuery, Prototype, Mootoools) t3jquery jQuery Framework und Plugins als Basis für Erweiterungen jfmulticontent Multicontent mit Tabs, Slider und Accordion imagecarousel Coole Bildgalerie (Imagecarousel) me_google_calend Google Kalender mit jQuery ar jfcloudzoom Zoom für Bilder im Frontend rzpopeye Inline Lightbox jq_pass_strength Passwort-Stärke-Anzeige powermail Formvalidierung über jQuery Wir leben TYPO3 In2code.de
- 78. jQuery Books Wir leben TYPO3 In2code.de
- 79. Books – Empfehlungen jQueryKochbuch (von jQuery Community Experts) „In diesem Buch werden Sie die wesentlichen Möglichkeiten lernen, wie Sie jQuery für Ihre eigenen Webapplikationen nutzen können - von einfachen Webseiten, die nur um einzelne Effekte aufgewertet werden sollen bis hin zu komplexen RIAS.“ jQuery: Das neue JavaScript-Framework für interaktives Design (von Ralph Steyer) „Mit den Rezepten aus dem Buch lernen Sie praxisbewährte Lösungen von einem Dutzend der führenden Entwickler, die jQuery für wirklich alles einsetzen: von der Integration simpler Komponenten in Webseiten bis hin zur Entwicklung komplexer, hochperformanter User-Schnittstellen.“ Wir leben TYPO3 In2code.de
- 80. jQuery oder TYPO3 Schulung gesucht? Wir leben TYPO3 In2code.de
- 81.
- 82. Vielen Dank Wir leben TYPO3 In2code.de in2code.de In2code.