jQuery in TYPO3 nutzen

Wir leben TYPO3

jQuery
in TYPO3 nutzen
Wir leben TYPO3 In2code.de

Was machen die bei 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


Agenda


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


Einführung


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


Was ist jQuery?

jQuery ist 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


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


jQuery
In TYPO3 einbinden


jQuery in TYPO3 einbinden

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



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



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


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


Erstes Script mit jQuery

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.


jQuery
Aufbau eines Aufrufs


Grundlegender Aufbau

Selektor

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

Funktion Event


jQuery Scripte selber ausprobieren

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>
</ul>
</div>


Selektion - Klasse

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

<ul class="list">
</ul>
</div>


Selektion - Tag

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

<ul class="list">
</ul>
</div>


Selektion - Verschachtelung

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

<ul class="list">
</ul>
</div>


Selektion – Erstes/Letztes Element

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

<ul class="list">
</ul>
</div>


Selektion – Odd/Even

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

<ul class="list">
</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 beinhalten

Volle 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 Ich bin das
Element mit Element mit
der ID der ID
„element“ „element“

Zeit


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


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


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


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


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


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

Ich bin das
Element mit
Dummycontent
der ID
„element“

Zeit


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/


AJAX in jQuery


Was ist AJAX?
Asynchronous JavaScript 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


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


AJAX in jQuery – Username ok?

Gewünschter Benutzername:

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



$("#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 Plugin
selber 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>



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



Aufruf des zu erstellenden Plugins accordion()

$('#accordion').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
})
}



Aufruf des zu erstellenden Plugins tooltip() mit Parametern

$('#accordion').accordion({
tag: 'h1',
speed: 200
});
})


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


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>
<div>
<h3>Letzter Titel</h3>
</div>
</div>


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;
}
};


Interessante jQuery
Plugins


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/


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


Interessante Plugins – jQuery Tooltip Plugin
<div class="product1">Produktname</div>
<div class="description1">Produktbeschreibung</div>

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

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


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/


Interessante Plugins – datePicker
<input type="text" class="date" />

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

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


Interessante Plugins – dropShadow
<div class="shadow">Content</div>

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

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


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/


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


jQuery
Fallstricke 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 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');
});


Probleme – Events bei 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');
});


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 IE7
if ($.browser.msie && $.browser.version == 7) {
// Ausführbarer JavaScript Code
}


Probleme – Stilles Debugging
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');


Probleme – andere JavaScript Frameworks
Problem:
jQuery vs. Mootools vs. Prototype vs. etc…
Verwendung des $-Zeichens in verschiedenen Frameworks führt
zwangsweise zu Konflikten
$(document).ready(function($) {
});

Lösung:
Verwendung des No-Conflict Mode
$.noConflict();
});


Probleme – Barrierefreiheit

Problem:
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";
});


jQuery
Showcase


Menü
auffahren

Suche oder
Kontaktformular bei
Mouseover anzeigen

in2code.de

Teaser bei
Mouseover anzeigen

Inhalt des Footers
per AJAX
austauschen


Elemente
per AJAX
nachladen

Bearbeitungs
elemente
sichtbar bei
Mouseover

Drag and
Drop um
Sortierung zu
ändern

fh-rosenheim.de


Produkt Box
FadeOut zuklappen

Menü
auffahren

conject.com
Logos
überblende
n

News
Karussell

Tab Menü Tooltips


jQuery
Links


Links – Allgemein zu 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


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_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


jQuery
Books


Books – Empfehlungen

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


jQuery oder TYPO3
Schulung gesucht?


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


Vielen Dank

in2code.de In2code.

jQuery in TYPO3 nutzen

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie jQuery in TYPO3 nutzen

Ähnlich wie jQuery in TYPO3 nutzen (20)

Mehr von Alex Kellner

Mehr von Alex Kellner (13)

jQuery in TYPO3 nutzen