In2code.deWir leben TYPO3
Wir leben TYPO3
jQueryin TYPO3 nutzen
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
Agenda
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
Einführung
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
jQueryIn TYPO3 einbinden
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
page.includeJSFooter.jquery.external = 1page.includeJSFooter.jquery = https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
jQuery in TYPO3 einbinden
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
In2code.deWir leben TYPO3
# Von TYPO3 Erweiterung t3jqueryincludeLibs.t3jquery = EXT:t3jquery/class.tx_t3jquery.phppage.1 = USERpage.1.userFunc = tx_t3jquery->addJqJS
jQuery in TYPO3 einbinden
3. Einbindung über TYPO3 Extension t3jquery
Vorteile: Einfache Einbindung für Anfänger
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
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.
In2code.deWir leben TYPO3
jQueryAufbau eines Aufrufs
In2code.deWir leben TYPO3
Grundlegender Aufbau
$('element').click(function() {$('element').hide();
})
$('element').click(function() {$('element').hide();
})
$('element').click(function() {$('element').hide();
})
$('element').click(function() {$('element').hide();
})
Funktion
Event
Selektor
In2code.deWir leben TYPO3
jQuery Scripte selber ausprobieren
http://jsbin.com
In2code.deWir leben TYPO3
jQuery Selektoren
In2code.deWir leben TYPO3
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>
In2code.deWir leben TYPO3
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>
In2code.deWir leben TYPO3
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>
In2code.deWir leben TYPO3
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>
In2code.deWir leben TYPO3
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>
In2code.deWir leben TYPO3
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>
In2code.deWir leben TYPO3
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/
In2code.deWir leben TYPO3
jQuery Events
In2code.deWir leben TYPO3
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/
In2code.deWir leben TYPO3
jQuery Funktionen
In2code.deWir leben TYPO3
Funktionen – hide / show
$('#hide').click(function() { $('#element').hide();
});$('#show').click(function() {
$('#element').show(); });
Ich bin das Element mit
der ID „element“
Zeit
Ich bin das Element mit
der ID „element“
In2code.deWir leben TYPO3
Funktionen – fadeIn / fadeOut
$('#show').click(function() { $('#element').fadeIn('slow');
});$('#hide').click(function() {
$('#element').fadeOut ('slow'); });
Ich bin das Element mit
der ID „element“
Ich bin das Element mit
der ID „element“
Ich bin das Element mit
der ID „element“
Ich bin das Element mit
der ID „element“
Zeit
In2code.deWir leben TYPO3
Funktionen – slideToggle
// open and close$('#toggle').click(function() {
$('#element').slideToggle('slow');});
Ich bin das Element mit
der ID „element“
Zeit
Ich bin das Element mit
der ID „element“
Ich bin das
In2code.deWir leben TYPO3
Funktionen – animate
$('#animation').click(function() { $('#element').animate({top: '+=100'}, 200);
});
Ich bin das Element mit
der ID „element“
Zeit
Ich bin das Element mit
der ID „element“
Ich bin das Element mit
der ID „element“
In2code.deWir leben TYPO3
Funktionen – addClass / removeClass
$('#event1').click(function() { $('#element').addClass('red');
});$('#event2').click(function() {
$('#element').removeClass('red'); });
Ich bin das Element mit
der ID „element“
Zeit
Ich bin das Element mit
der ID „element“
Ich bin das Element mit
der ID „element“
In2code.deWir leben TYPO3
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" />
In2code.deWir leben TYPO3
Funktionen – html
$('#element').click(function() { $('#element').html('Dummycontent');
});
Ich bin das Element mit
der ID „element“
Zeit
Dummycontent
In2code.deWir leben TYPO3
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/
In2code.deWir leben TYPO3
AJAX in jQuery
In2code.deWir leben TYPO3
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.
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
AJAX in jQuery – Username ok?
<form id="form">…<input type="text" name="username" id="username"
/>…
</form>
Gewünschter Benutzername:
In2code.deWir leben TYPO3
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');}
}});
});
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
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/
In2code.deWir leben TYPO3
jQuery Pluginselber erstellen
In2code.deWir leben TYPO3
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>
In2code.deWir leben TYPO3
jQuery Plugin erstellen - Accordion
// 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
In2code.deWir leben TYPO3
jQuery Plugin erstellen - Accordion
jQuery(document).ready(function($) {$('#accordion').accordion();
})
Aufruf des zu erstellenden Plugins accordion()
In2code.deWir leben TYPO3
jQuery Plugin erstellen - 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
In2code.deWir leben TYPO3
jQuery Plugin erstellen - Accordion
jQuery(document).ready(function($) {$('#accordion').accordion({
tag: 'h1',speed: 200
});})
Aufruf des zu erstellenden Plugins tooltip() mit Parametern
In2code.deWir leben TYPO3
jQuery Plugin erstellen - Accordion
$.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
In2code.deWir leben TYPO3
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>
In2code.deWir leben TYPO3
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();
In2code.deWir leben TYPO3
Interessante jQueryPlugins
In2code.deWir leben TYPO3
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 });
});
In2code.deWir leben TYPO3
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();
In2code.deWir leben TYPO3
Interessante Plugins – jQuery Tooltip Plugin
Plugin unter http://intekhabrizvi.wordpress.com/
<div class="product1">Produktname</div><div class="description1">Produktbeschreibung</div>
$('.tooltip').tooltip();
In2code.deWir leben TYPO3
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();
In2code.deWir leben TYPO3
Interessante Plugins – datePicker
Plugin unter http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
<input type="text" class="date" />
$('.date').datepicker();
In2code.deWir leben TYPO3
Interessante Plugins – dropShadow
Plugin unter http://plugins.jquery.com/project/DropShadow
<div class="shadow">Content</div>
$(".shadow").dropShadow();
In2code.deWir leben TYPO3
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();
In2code.deWir leben TYPO3
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();
In2code.deWir leben TYPO3
jQueryFallstricke und Probleme
In2code.deWir leben TYPO3
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
});
In2code.deWir leben TYPO3
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');
});
In2code.deWir leben TYPO3
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');});
In2code.deWir leben TYPO3
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}
In2code.deWir leben TYPO3
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');
In2code.deWir leben TYPO3
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();});
In2code.deWir leben TYPO3
$('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";
});
In2code.deWir leben TYPO3
jQueryShowcase
In2code.deWir leben TYPO3
in2code.de
Menü auffahren
Teaser bei Mouseover anzeigen
Inhalt des Footers per AJAX
austauschen
Suche oder Kontaktformular bei Mouseover anzeigen
In2code.deWir leben TYPO3
Elemente per AJAX nachlade
n
Bearbeitungselemente sichtbar bei Mouseover
Drag and Drop um
Sortierung zu ändern
fh-rosenheim.de
In2code.deWir leben TYPO3
conject.com
Box zuklappe
n
Menü auffahren
Logos überblend
en
News Karussell
Tab Menü Tooltips
Produkt FadeOut
In2code.deWir leben TYPO3
jQueryLinks
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
jQueryBooks
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
jQuery oder TYPO3Schulung gesucht?
In2code.deWir leben TYPO3
http://www.in2code.de/typo3-schulung/
In2code.deWir leben TYPO3In2code.
Vielen Dank
in2code.de