SlideShare ist ein Scribd-Unternehmen logo
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



 Wir leben TYPO3                                                        In2code.de
Agenda




Wir leben TYPO3            In2code.de
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
Einführung




Wir leben TYPO3                In2code.de
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
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




Wir leben TYPO3                                      In2code.de
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



Wir leben TYPO3                                      In2code.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



Wir leben TYPO3                           In2code.de
jQuery
                  In TYPO3 einbinden




Wir leben TYPO3                        In2code.de
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



Wir leben TYPO3                                         In2code.de
jQuery in TYPO3 einbinden

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
jQuery in TYPO3 einbinden

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




Wir leben TYPO3                                            In2code.de
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.



Wir leben TYPO3                                           In2code.de
jQuery
                  Aufbau eines Aufrufs




Wir leben TYPO3                          In2code.de
Grundlegender Aufbau


         Selektor

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

           Funktion            Event


Wir leben TYPO3                     In2code.de
jQuery Scripte selber ausprobieren




http://jsbin.com



Wir leben TYPO3                      In2code.de
jQuery Selektoren




Wir leben TYPO3                   In2code.de
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
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
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
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
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>




Wir leben TYPO3                                    In2code.de
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
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
jQuery Events




Wir leben TYPO3                   In2code.de
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
jQuery Funktionen




Wir leben TYPO3                   In2code.de
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
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
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
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
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
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
Funktionen – html
$('#element').click(function() {
        $('#element').html('Dummycontent');
});




  Ich bin das
  Element mit
                   Dummycontent
     der ID
   „element“


                              Zeit


Wir leben TYPO3                               In2code.de
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
AJAX in jQuery




Wir leben TYPO3                    In2code.de
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




 Wir leben TYPO3                                                      In2code.de
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
AJAX in jQuery – Username ok?


Gewünschter Benutzername:



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




Wir leben TYPO3                                      In2code.de
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
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
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/




Wir leben TYPO3                                                  In2code.de
jQuery Plugin
                  selber erstellen



Wir leben TYPO3                      In2code.de
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
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
jQuery Plugin erstellen - Accordion

Aufruf des zu erstellenden Plugins accordion()

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




Wir leben TYPO3                                  In2code.de
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
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
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
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
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
Interessante jQuery
                   Plugins



Wir leben TYPO3                    In2code.de
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
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
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
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
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
Interessante Plugins – dropShadow
<div class="shadow">Content</div>


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




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


Wir leben TYPO3                                        In2code.de
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
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
jQuery
       Fallstricke und Probleme



Wir leben TYPO3              In2code.de
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
});


Wir leben TYPO3                                      In2code.de
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');
});


Wir leben TYPO3                                                   In2code.de
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');
});



Wir leben TYPO3                                           In2code.de
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
}




Wir leben TYPO3                                           In2code.de
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');




Wir leben TYPO3                                              In2code.de
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($) {
       $('#element').hide();
});


Lösung:
Verwendung des No-Conflict Mode
$.noConflict();
jQuery(document).ready(function($) {
        $('#element').hide();
});


Wir leben TYPO3                                        In2code.de
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";
});



Wir leben TYPO3                                       In2code.de
jQuery
                  Showcase



Wir leben TYPO3              In2code.de
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
Elemente
                                  per AJAX
                                 nachladen


                               Bearbeitungs
                                 elemente
                                sichtbar bei
                                Mouseover



                                 Drag and
                                 Drop um
                               Sortierung zu
                                  ändern


                  fh-rosenheim.de

Wir leben TYPO3              In2code.de
Produkt                 Box
                   FadeOut              zuklappen

                                                      Menü
                                                    auffahren




                                               conject.com
                                                      Logos
                                                    überblende
                                                        n

                                                       News
                                                      Karussell


        Tab Menü             Tooltips


Wir leben TYPO3                                           In2code.de
jQuery
                   Links



Wir leben TYPO3            In2code.de
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




Wir leben TYPO3                                                                  In2code.de
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



Wir leben TYPO3                                                  In2code.de
jQuery
                  Books



Wir leben TYPO3            In2code.de
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.“



Wir leben TYPO3                                         In2code.de
jQuery oder TYPO3
              Schulung gesucht?




Wir leben TYPO3                   In2code.de
http://www.in2code.de/typo3-schulung/



Wir leben TYPO3                         In2code.de
Vielen Dank




  Wir leben TYPO3                   In2code.de
in2code.de                        In2code.

Weitere ähnliche Inhalte

Ähnlich wie jQuery in TYPO3 nutzen

Schulung jQuery JavaScript-Bibliothek
Schulung jQuery JavaScript-BibliothekSchulung jQuery JavaScript-Bibliothek
Schulung jQuery JavaScript-Bibliothektutego
 
jQuery Mobile mit TYPO3
jQuery Mobile mit TYPO3jQuery Mobile mit TYPO3
jQuery Mobile mit TYPO3Alex Kellner
 
Backendlayout mit FLUID-Templates
Backendlayout mit FLUID-TemplatesBackendlayout mit FLUID-Templates
Backendlayout mit FLUID-TemplatesMarcus Schwemer
 
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen AnwendungenJavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen Anwendungenmolily
 
Entwickeln mit Wordpress
Entwickeln mit WordpressEntwickeln mit Wordpress
Entwickeln mit WordpressBlogwerk AG
 
Dokumentation schreiben kann spass machen
Dokumentation schreiben kann spass machenDokumentation schreiben kann spass machen
Dokumentation schreiben kann spass machenSebastian Hempel
 
Shibboleth Single-Sign-On mit TYPO3
Shibboleth Single-Sign-On mit TYPO3Shibboleth Single-Sign-On mit TYPO3
Shibboleth Single-Sign-On mit TYPO3tschikarski
 
TYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein WissenTYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein WissenAlex Kellner
 
Themes – Wieso, Weshalb, Warum!?
Themes – Wieso, Weshalb, Warum!?Themes – Wieso, Weshalb, Warum!?
Themes – Wieso, Weshalb, Warum!?frankstaude
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkdie.agilen GmbH
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptRalf Schwoebel
 
TYPO3 5.0 - Der aktuelle Stand der Zukunft
TYPO3 5.0 - Der aktuelle Stand der ZukunftTYPO3 5.0 - Der aktuelle Stand der Zukunft
TYPO3 5.0 - Der aktuelle Stand der ZukunftJochen Rau
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader
 
WordCamp Köln Filter, Actions, Hooks - was zum Geier ist das?
WordCamp Köln Filter, Actions, Hooks - was zum Geier ist das?WordCamp Köln Filter, Actions, Hooks - was zum Geier ist das?
WordCamp Köln Filter, Actions, Hooks - was zum Geier ist das?frankstaude
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notesdominion
 
Filter, Actions, Hooks - Was zum Geier ist das?
Filter, Actions, Hooks - Was zum Geier ist das?Filter, Actions, Hooks - Was zum Geier ist das?
Filter, Actions, Hooks - Was zum Geier ist das?frankstaude
 
Javascript done right
Javascript done rightJavascript done right
Javascript done rightDirk Ginader
 

Ähnlich wie jQuery in TYPO3 nutzen (20)

Schulung jQuery JavaScript-Bibliothek
Schulung jQuery JavaScript-BibliothekSchulung jQuery JavaScript-Bibliothek
Schulung jQuery JavaScript-Bibliothek
 
jQuery Mobile mit TYPO3
jQuery Mobile mit TYPO3jQuery Mobile mit TYPO3
jQuery Mobile mit TYPO3
 
Backendlayout mit FLUID-Templates
Backendlayout mit FLUID-TemplatesBackendlayout mit FLUID-Templates
Backendlayout mit FLUID-Templates
 
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen AnwendungenJavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
 
TYPO3 Translations
TYPO3 Translations TYPO3 Translations
TYPO3 Translations
 
Entwickeln mit Wordpress
Entwickeln mit WordpressEntwickeln mit Wordpress
Entwickeln mit Wordpress
 
Dokumentation schreiben kann spass machen
Dokumentation schreiben kann spass machenDokumentation schreiben kann spass machen
Dokumentation schreiben kann spass machen
 
Shibboleth Single-Sign-On mit TYPO3
Shibboleth Single-Sign-On mit TYPO3Shibboleth Single-Sign-On mit TYPO3
Shibboleth Single-Sign-On mit TYPO3
 
TYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein WissenTYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein Wissen
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Wicket Kurzübersicht
 
Themes – Wieso, Weshalb, Warum!?
Themes – Wieso, Weshalb, Warum!?Themes – Wieso, Weshalb, Warum!?
Themes – Wieso, Weshalb, Warum!?
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
 
MVVM mit WPF
MVVM mit WPFMVVM mit WPF
MVVM mit WPF
 
TYPO3 5.0 - Der aktuelle Stand der Zukunft
TYPO3 5.0 - Der aktuelle Stand der ZukunftTYPO3 5.0 - Der aktuelle Stand der Zukunft
TYPO3 5.0 - Der aktuelle Stand der Zukunft
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
 
WordCamp Köln Filter, Actions, Hooks - was zum Geier ist das?
WordCamp Köln Filter, Actions, Hooks - was zum Geier ist das?WordCamp Köln Filter, Actions, Hooks - was zum Geier ist das?
WordCamp Köln Filter, Actions, Hooks - was zum Geier ist das?
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notes
 
Filter, Actions, Hooks - Was zum Geier ist das?
Filter, Actions, Hooks - Was zum Geier ist das?Filter, Actions, Hooks - Was zum Geier ist das?
Filter, Actions, Hooks - Was zum Geier ist das?
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
 

Mehr von Alex Kellner

TYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
TYPO3 Migration in komplexen Upgrade- und Relaunch-ProjektenTYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
TYPO3 Migration in komplexen Upgrade- und Relaunch-ProjektenAlex Kellner
 
Vorstellung TYPO3 Neos - Release 1.0 - Releaseparty Rosenheim
Vorstellung TYPO3 Neos - Release 1.0 - Releaseparty RosenheimVorstellung TYPO3 Neos - Release 1.0 - Releaseparty Rosenheim
Vorstellung TYPO3 Neos - Release 1.0 - Releaseparty RosenheimAlex Kellner
 
Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0Alex Kellner
 
TYPO3 Extension in2snippets
TYPO3 Extension in2snippetsTYPO3 Extension in2snippets
TYPO3 Extension in2snippetsAlex Kellner
 
TYPO3 coding guidelines
TYPO3 coding guidelinesTYPO3 coding guidelines
TYPO3 coding guidelinesAlex Kellner
 
TYPO3 TypoScript: IF, CASE, CONDITIONS
TYPO3 TypoScript: IF, CASE, CONDITIONSTYPO3 TypoScript: IF, CASE, CONDITIONS
TYPO3 TypoScript: IF, CASE, CONDITIONSAlex Kellner
 
Extension linkhandler
Extension linkhandlerExtension linkhandler
Extension linkhandlerAlex Kellner
 
Secure TYPO Extensions
Secure TYPO ExtensionsSecure TYPO Extensions
Secure TYPO ExtensionsAlex Kellner
 
TYPO3 security updates
TYPO3 security updatesTYPO3 security updates
TYPO3 security updatesAlex Kellner
 
SEO on TYPO3 homepage
SEO on TYPO3 homepageSEO on TYPO3 homepage
SEO on TYPO3 homepageAlex Kellner
 
Presentation of Powermail for TYPO3
Presentation of Powermail for TYPO3Presentation of Powermail for TYPO3
Presentation of Powermail for TYPO3Alex Kellner
 

Mehr von Alex Kellner (14)

TYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
TYPO3 Migration in komplexen Upgrade- und Relaunch-ProjektenTYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
TYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
 
Vorstellung TYPO3 Neos - Release 1.0 - Releaseparty Rosenheim
Vorstellung TYPO3 Neos - Release 1.0 - Releaseparty RosenheimVorstellung TYPO3 Neos - Release 1.0 - Releaseparty Rosenheim
Vorstellung TYPO3 Neos - Release 1.0 - Releaseparty Rosenheim
 
Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0
 
Powermail 2.0
Powermail 2.0Powermail 2.0
Powermail 2.0
 
TYPO3 Extension in2snippets
TYPO3 Extension in2snippetsTYPO3 Extension in2snippets
TYPO3 Extension in2snippets
 
TYPO3 coding guidelines
TYPO3 coding guidelinesTYPO3 coding guidelines
TYPO3 coding guidelines
 
TYPO3 TypoScript: IF, CASE, CONDITIONS
TYPO3 TypoScript: IF, CASE, CONDITIONSTYPO3 TypoScript: IF, CASE, CONDITIONS
TYPO3 TypoScript: IF, CASE, CONDITIONS
 
Extension linkhandler
Extension linkhandlerExtension linkhandler
Extension linkhandler
 
SEO for Editors
SEO for EditorsSEO for Editors
SEO for Editors
 
Secure TYPO Extensions
Secure TYPO ExtensionsSecure TYPO Extensions
Secure TYPO Extensions
 
Powermail Tritum
Powermail TritumPowermail Tritum
Powermail Tritum
 
TYPO3 security updates
TYPO3 security updatesTYPO3 security updates
TYPO3 security updates
 
SEO on TYPO3 homepage
SEO on TYPO3 homepageSEO on TYPO3 homepage
SEO on TYPO3 homepage
 
Presentation of Powermail for TYPO3
Presentation of Powermail for TYPO3Presentation of Powermail for TYPO3
Presentation of Powermail for TYPO3
 

jQuery in TYPO3 nutzen

  • 1. Wir leben TYPO3 jQuery in TYPO3 nutzen Wir leben TYPO3 In2code.de
  • 2. 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 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
  • 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? 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 Wir leben TYPO3 In2code.de
  • 8. 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 Wir leben TYPO3 In2code.de
  • 9. 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 Wir leben TYPO3 In2code.de
  • 10. jQuery In TYPO3 einbinden Wir leben TYPO3 In2code.de
  • 11. 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 Wir leben TYPO3 In2code.de
  • 12. jQuery in TYPO3 einbinden 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 TYPO3 einbinden 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 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 Wir leben TYPO3 In2code.de
  • 15. 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. 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 selber ausprobieren http://jsbin.com Wir leben TYPO3 In2code.de
  • 19. jQuery Selektoren Wir leben TYPO3 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/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> 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 leben TYPO3 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 leben TYPO3 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 Wir leben TYPO3 In2code.de
  • 39. 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 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 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/ 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 – 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 }); Wir leben TYPO3 In2code.de
  • 65. 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'); }); Wir leben TYPO3 In2code.de
  • 66. 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'); }); Wir leben TYPO3 In2code.de
  • 67. 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 } Wir leben TYPO3 In2code.de
  • 68. 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'); Wir leben TYPO3 In2code.de
  • 69. 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($) { $('#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: 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"; }); 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 – 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 Wir leben TYPO3 In2code.de
  • 77. 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 Wir leben TYPO3 In2code.de
  • 78. jQuery Books Wir leben TYPO3 In2code.de
  • 79. 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.“ Wir leben TYPO3 In2code.de
  • 80. jQuery oder TYPO3 Schulung gesucht? Wir leben TYPO3 In2code.de
  • 82. Vielen Dank Wir leben TYPO3 In2code.de in2code.de In2code.