jQuery in TYPO3 nutzen

In2code.deWir leben TYPO3

Wir leben TYPO3

jQueryin TYPO3 nutzen


Was machen die bei in2code?

Alex Kellner

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.

TYPO3

Extensions

Entwicklung

Fluid

Security

Performance

Workshops

FLOW3Martin HuberMarcus

Schwemer

Michael Cannon

Stefan BusemannMarkus Rodler

David Richter

Tina Gasteiger

Consulting

Extbase


Agenda


Agenda

•Erklärung

•Warum jQuery

•Einbindung in TYPO3

•Aufbau eines Aufrufes

•Selektoren

•Events

•Funktionen

•AJAX in jQuery

•Plugin selber erstellen

•Interessante jQuery

Plugins

•Fallstricke & Probleme

•Showcase

•Links

•Books


Einführung


jQuery, JavaScript, HTML, PHP?

HTML

„Guten Morgen“„Guten Abend“

Serverseitige Scriptsprachez.B. PHP mit TYPO3

HTML

„Morgen“

PHP

Clientseitige Scriptsprachez.B. JavaScript mit jQuery

JavaScript


Was ist jQuery?

jQuery ist ein freies, umfangreiches JavaScript-Framework, das komfortable Funktionen zur DOM-Manipulation (Document Object Model) zur Verfügung stellt.

Veröffentlicht von John Resig bereits im Januar 2006 auf einem 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


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.de


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 Plugins


jQueryIn TYPO3 einbinden


jQuery in TYPO3 einbinden

page.includeJS.jquery = fileadmin/jquery.min.js

page.includeJSFooter.jquery = fileadmin/jquery.min.js

1. Manuell vom eigenen Server (zuvor Download von jquery.com)

Einbindung in HTML Head Bereich über TypoScript:

Einbindung am Ende des HTML Bereich über TypoScript:

Vorteile: Einbindung im Footerbereich performanter


page.includeJSFooter.jquery.external = 1page.includeJSFooter.jquery = https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js


2. Einbinung direkt über Google

Vorteile: Performance wenn viele Internetseiten ähnliche Einbindung nutzen, Spart dem Entwickler Zeit bei der Einbindung

Neueste 1.x.x Version

https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js(derzeit 1.7.1)

Neueste 1.6.x Version

https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js(derzeit 1.6.4)

Exakt Version 1.6.3

https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js


# Von TYPO3 Erweiterung t3jqueryincludeLibs.t3jquery = EXT:t3jquery/class.tx_t3jquery.phppage.1 = USERpage.1.userFunc = tx_t3jquery->addJqJS


3. Einbindung über TYPO3 Extension t3jquery

Vorteile: Einfache Einbindung für Anfänger


jQuery in TYPO3 einbinden (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 = 1page.includeJSFooter.jquery = https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.jspage.includeJSFooter.myjavascript = fileadmin/script.js


Erstes Script mit jQuery

jQuery(document).ready(function($) {$('h1').hide();

})

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).

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.


jQueryAufbau eines Aufrufs


Grundlegender Aufbau

$('element').click(function() {$('element').hide();

})


})


})


})

Funktion

Event

Selektor


jQuery Scripte selber ausprobieren

http://jsbin.com

http://jsbin.com/

http://jsbin.com/


jQuery Selektoren


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>


Selektion - Klasse

// Ausgewählte Element mit bestimmter Klasse$('.list').hide();



</ul></div>


Selektion - Tag

// Alle li-Tags$('li').hide();



</ul></div>


Selektion - Verschachtelung

// Verschachtelung ähnlich wie CSS$('div#container .list').hide();



</ul></div>


Selektion – Erstes/Letztes Element

// Erstes Kindelement$('li:first').hide();// Letztes Kindelement$('li:last').hide();



</ul></div>


Selektion – Odd/Even

// Jedes zweite Element („Zebratabelle“)$('li:even').addClass('even'); $('li:odd').addClass('odd');



</ul></div>


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 beinhaltenVolle Liste unter http://api.jquery.com/category/selectors/


jQuery Events


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/


jQuery Funktionen


Funktionen – hide / show

$('#hide').click(function() { $('#element').hide();

});$('#show').click(function() {

$('#element').show(); });

Ich bin das Element mit

der ID „element“

Zeit




Funktionen – fadeIn / fadeOut

$('#show').click(function() { $('#element').fadeIn('slow');

});$('#hide').click(function() {

$('#element').fadeOut ('slow'); });









Zeit


Funktionen – slideToggle

// open and close$('#toggle').click(function() {

$('#element').slideToggle('slow');});



Zeit



Ich bin das


Funktionen – animate

$('#animation').click(function() { $('#element').animate({top: '+=100'}, 200);

});



Zeit






Funktionen – addClass / removeClass

$('#event1').click(function() { $('#element').addClass('red');

});$('#event2').click(function() {

$('#element').removeClass('red'); });



Zeit






Funktionen – attr

$('#changeTitle').click(function() { $('img.title').attr('title', 'Richtig gutes Bild');

});

Zeit

<img src="dog.jpg" /> <img src="dog.jpg"title="Richtig gutes Bild" />


Funktionen – html

$('#element').click(function() { $('#element').html('Dummycontent');

});



Zeit

Dummycontent


Effekt-Funktionen - Überblick

Funktionen Beschreibung

animate() Ablauf verschiedener CSS-Änderungen

fadeIn()fadeOut()

Einblenden von Elementen Ausblenden von Elementen

fadeTo() Ein/Ausblenden bis zu einem gewissen Punkt

delay() Verzögerungsfunktion

hide()show()

display:none;display:block;

slideUp()slideDown()slideToggle()

Auffahren eines ElementesZufahren eines ElementesAuf- oder Zufahren eines Elementes (je nach Zustand)

Volle Liste unter http://api.jquery.com/category/effects/


AJAX in jQuery


Was ist AJAX?

HTML PHP

JavaScript

Alex

Vorname

Benutzername

Passwort

Registrierungsformular

schon vergeben

POST/GET

XML/HTML

Asynchronous JavaScript And XMLAsynchrone Datenübertragung zwischen Browser und Server. Ermöglicht HTTP-Anfragen durchzuführen während eine HTML-Seite angezeigt wird, und die Seite zu verändern, ohne sie komplett neu zu laden.


AJAX in jQuery – Erstes Beispiel

$('a.ajax').click(function(){ $.ajax({

url: 'test.txt', success: function(text) {

alert('Text geladen: ' + text); }

}); });

Testinhalt test.txt

Text geladen: Testinhalt


AJAX in jQuery – Username ok?

<form id="form">…<input type="text" name="username" id="username"

/>…

</form>

Gewünschter Benutzername:



$("#username").blur(function() { $.ajax({

url: 'validUsername.php ', data: $('#form').serialize(),success: function(returnData) {

if (returnData != 'ok') {alert('Username bereits

vergeben');}

}});

});



…$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


AJAX in TYPO3 nutzen

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/


jQuery Pluginselber erstellen


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>



// Struktur 1$.fn.plugin = function(){

// Plugin-Code}

// Struktur 2(function($){

$.fn.plugin = function(){ // Plugin-Code

}})(jQuery);

Zwei mögliche Plugin Grundstrukturen können unseren künftigen Code kapseln



jQuery(document).ready(function($) {$('#accordion').accordion();

})

Aufruf des zu erstellenden Plugins accordion()



$.fn.accordion = function(){var accordion = $(this);

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

})}

Plugin Funktion schreiben

Parameter im Plugin fest definiert



jQuery(document).ready(function($) {$('#accordion').accordion({

tag: 'h1',speed: 200

});})

Aufruf des zu erstellenden Plugins tooltip() mit Parametern



$.fn.accordion = function(options){var accordion = $(this);

options = $.extend({tag: 'h1',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})

}

Parameter default Werte wenn keine Übergeben

wurden


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>


jQuery Plugin erstellen - Tab$.fn.tabs = function(options) {

options = $.extend({tabTag: 'h3'

}, options); var tabElement = $(this);tabElement.prepend(generateMenu()); // create menutabElement.children('div').hide(); // hide all itemstabElement.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 itemtabElement.children('div').hide(); // hide allindex = $('.tabmenu li').index($(this)); // index of clicked itemtabElement.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>';

});menu += '</ul>';return menu;

}};

Funktionen im Plugin bieten

logische Einheiten

// Aufruf mit$('.tab').tabs();


Interessante jQueryPlugins


Interessante Plugins – Cycle Plugin

Plugin unter http://jquery.malsup.com/cycle/

<div class="bilder"><img src="bild1.jpg" /><img src="bild2.jpg" />

</div>

Zeit

$(document).ready(function() { $('.bilder').cycle({ fx: 'fade', speed: 8000 });

});


Interessante Plugins – Superfish Menu

Plugin unter http://plugins.jquery.com/project/Superfish

<ul class="menu"><li><a href="#">TYPO3</a>

<ul><li>…</li></ul></li>

</ul>

Zeit

$('ul.menu').superfish();


Interessante Plugins – jQuery Tooltip Plugin

Plugin unter http://intekhabrizvi.wordpress.com/

<div class="product1">Produktname</div><div class="description1">Produktbeschreibung</div>

$('.tooltip').tooltip();


Interessante Plugins – jCarousel

Plugin unter http://sorgalla.com/jcarousel/

<ul id="jcarousel"><li>Element 1</li><li>Element 2</li><li>Element 3</li>

</ul>

$('#jcarousel').jcarousel();


Interessante Plugins – datePicker

Plugin unter http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/

<input type="text" class="date" />

$('.date').datepicker();


Interessante Plugins – dropShadow

Plugin unter http://plugins.jquery.com/project/DropShadow

<div class="shadow">Content</div>

$(".shadow").dropShadow();


Interessante Plugins – inline form validation

Plugin unter http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

<form class="validation"><input class="validate[required],length[0,100]]"

name="firstname" type="text" /></form>

$('.validation').validationEngine();


Interessante Plugins – dataTables

Plugin unter http://datatables.net

<table><thead><tr><th>Spalte1</th><th>Spalte2</th></tr></

thead><tr><td>Zelle1</td><td>Zelle2</td></tr>

</table>

$('#table').dataTable();


jQueryFallstricke und Probleme


Probleme – Klick auf 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

});


Probleme – Klick-Vererbung verhindern

Problem: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 ">

Text<span>Link</span>

</div>

Lösung:Verwendung von stopPropagination()

$('.container').click(function() { alert('click1');

});$('span').click(function() {

alert('click2');});

…$('span').click(function(e) {

e.stopPropagination(); alert('click2');

});


Probleme – Events bei geladenen ObjektenProblem:Nachgeladene DOM-Objekte haben keinen Eventhandler

…<div class="nachgeladen">

<span>Link</span></div>…

Lösung:Verwendung von live()

// In div.nachgeladen wird// „<span>Link</span>“ // per AJAX geladen und eingefügt…$('span').click(function() {

alert('click');

});

…$('span').live('click', function() {

alert('click');});


Probleme – Separierung auf 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 IE7if ($.browser.msie && $.browser.version == 7) {

// Ausführbarer JavaScript Code}


Probleme – Stilles Debugging

Problem:Ausgabe von ganzen Arrays oder ObjektenOhne 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 JavaScriptconsole.log($.browser);console.log('xyz');


Probleme – andere JavaScript Frameworks

Problem:jQuery vs. Mootools vs. Prototype vs. etc…Verwendung des $-Zeichens in verschiedenen Frameworks führt zwangsweise zu Konflikten

Lösung:Verwendung des No-Conflict Mode

$(document).ready(function($) { $('#element').hide();

});

$.noConflict();jQuery(document).ready(function($) {

$('#element').hide();});


$('div.element').click(function() { window.location = "http://www.typo3.org";

});

Probleme – Barrierefreiheit

Problem:Keine Linkauszeichnung

Lösung:Linkauszeichnung als solche durchführen

$('a.element').click(function() { window.location = "http://www.typo3.org";

});


jQueryShowcase


in2code.de

Menü auffahren

Teaser bei Mouseover anzeigen

Inhalt des Footers per AJAX

austauschen

Suche oder Kontaktformular bei Mouseover anzeigen


Elemente per AJAX nachlade

n

Bearbeitungselemente sichtbar bei Mouseover

Drag and Drop um

Sortierung zu ändern

fh-rosenheim.de


conject.com

Box zuklappe

n

Menü auffahren

Logos überblend

en

News Karussell

Tab Menü Tooltips

Produkt FadeOut


jQueryLinks


Cheatsheet (printable PDF):http://labs.impulsestudios.ca/downloads/impulse_studios-jquery_cheat_sheet-1.0.pdf

Links – Allgemein zu jQuery

jQuery Referenz:http://docs.jquery.com

jQuery Plugins:http://plugins.jquery.com

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


Links – TYPO3 Extensions 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_calendar

Google Kalender mit jQuery

jfcloudzoom Zoom für Bilder im Frontend

rzpopeye Inline Lightbox

jq_pass_strength Passwort-Stärke-Anzeige

powermail Formvalidierung über jQuery


jQueryBooks


jQuery Kochbuch (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.“

Books – Empfehlungen


jQuery oder TYPO3Schulung gesucht?


http://www.in2code.de/typo3-schulung/



In2code.deWir leben TYPO3In2code.

Vielen Dank

in2code.de

Technology

jQuery in TYPO3 nutzen