JQuery Kochbuch (German Edition)

verändern
    .siblings('li').stop().animate({
     width: '135px',
     fontSize: '50px'

    // Geschwindigkeit
    }, speed);
},

// Mouseout
function() {

    // Ziel-

zurücksetzen
    $(this).stop().animate({
     width: '180px',
     fontSize: '100px'

    // Geschwindigkeit
    }, speed)

    // Geschwister-

zurücksetzen
    .siblings('li').stop().animate({
     width: '180px',
     fontSize: '100px'

    // Geschwindigkeit
    }, speed);
});
}

// Los geht's
$(document).ready(function() {
init_panels();
});
    Diskussion
    Das Rezept beginnt mit der Definition einer Variablen
speed
. Hier setzen wir sie auf 200 Millisekunden. Dann fügen wir an jedes letzte

das Attribut
class="last"
an. Danach binden wir einen Hover-Event-Listener (das ist eigentlich sowohl ein Mouseover- als auch ein Mouseout-Event, aber wir wollen hier nicht zu technisch werden). Wenn man den Mauscursor über ein

-Element bewegt, wird es auf
40%
und eine Schriftgröße von
150px
animiert, während die anderen

-Elemente auf
15%
und eine Schriftgröße von
50px
animiert werden. Verlässt der Mauscursor das

, dann werden umgekehrt alle

-Elemente auf
20%
und die Schriftgröße auf
100px
gesetzt.

Chapter 14. Benutzerschnittstellen mit jQuery UI
    Richard D. Worth

14.1. Einleitung
    Vor ein paar Jahren wurden ein paar sehr beliebter jQuery-Plugins zu einem Paket namens Interface zusammengefasst,um das sich Stefan Petre gekümmert hat. In diesem Paket gab es tolle Interaktionsmöglichkeiten, zum Beispiel Drap-and-Drop, Auswählen, Sortieren, Anpassen der Größe, und erstklassige Widgets, zum Beispiel für Tooltips, ein Autovervollständigen und ein Akkordeon. Mit dem Release 1.2 von jQuery gab es ein paar API-Änderungen, die auch Anpassungen an Interface erforderlich gemacht hätten. Das ist aber nie geschehen.
    jQuery UI , initiiert von Paul Bakaus, hat da angefangen, wo Interface aufgehört hat. jQuery UI ist eine Sammlung von Plugins mit einer konsistenten API und vollständiger Dokumentation. Die Plugins wurden in allen wichtigen Browsern getestet. Mit dieser Sammlung können Sie anspruchsvolle Web-Benutzeroberflächen und Rich Internet Applications (RIAs) schaffen. Oh, und die Plugins arbeiten auch noch zusammen und sind leicht zu verwenden, sie sind barrierefrei, erweiterbar und mit Themes zu gestalten.
    jQuery UI ist ein Schwesterprojekt von jQuery. Die Version 1.0 von jQuery UI wurde im September 2007 veröffentlicht, Version 1.5 im Juni 2008. Nachdem man mit der Entwicklung von 1.6 schon halb fertig war, hat das Team die Richtung geändert und brachte ins Release 1.7 einige entscheidende Veränderungen ein, vor allem mit der Einführung des jQuery UI CSS Framework . jQuery UI 1.6 wurde später aus Kompatibilitätsgründen noch veröffentlicht. Das neueste stabile Release ist 1.7.2 und es enthält die folgenden Interaktionen, Widgets und Effekte.
    Interaktionen
    Draggable (Drag)
Droppable (and Drop)
Resizable (Anpassen der Größe)
Selectable (Auswählbar)
Sortable (Sortierbar)
    Widgets
    Accordion
Datepicker
Dialog
Progressbar
Slider
Tabs
    Effekte
    Blind, Bounce, Clip, Drop Down/Up/Left/Right, Explode, Fold, Highlight, Pulsate, Puff, Scale, Shake, Slide Down/Up/Left/Right, Transfer
Farbanimationen
Klassenanimationen (
addClass
/
removeClass
/
toggleClass
mit Intervall)
    Grundlegende Verwendung
    Dieses Kapitel wird sich nicht um die üblichen Wege kümmern, wie diese Interaktionen, Widgets und Effekte genutzt werden können, denn dies wird schon sehr gut anhand der Demos auf der jQuery UI-Website vorgestellt. Diese gleichen Demos finden sich mit dem vollständigen Quellcode und mit Beschreibungen in jeder herunterladbaren Version von jQuery UI – zusammen mit der kompletten Dokumentation.
    Wie dieses Kapitel aufgebaut ist
    Die ersten beiden Rezepte zeigen Ihnen, wie Sie jQuery UI herunterladen oder es über ein Content Delivery Network (CDN) ansprechen und auf Ihrer Webseite einbinden können.
    Die nächsten sieben Rezepte behandelt die API von jQuery UI. Diese API baut auf das jQuery-Plugin-Muster auf, enthält aber auch alles, was von den jQuery UI-Widgets benötigt wird. Diese Widgets sind eine spezielle Form von jQuery-Plugins. Insbesondere besitzen sie einen Zustand und sie verfügen über Methodenaufrufe. Neben der Angabe von Optionen beim Aufruf von
init
können Sie also auch danach noch Veränderungen vornehmen. Zudem können Sie Methoden für jQuery UI-Plugins aufrufen, um den Zustand zu ändern und per Code eigene Events