JQuery Kochbuch (German Edition)

etwas über die Tastatur, die Maus oder durch einen JavaScript-Aufruf ausgelöst wurde. Oder es hilft Ihnen dabei, zu ermitteln, ob eine zusätzliche Taste gedrückt war, während mit der Maus geklickt oder sie bewegt wurde.
    Das Argument
ui
istein Hash mit allen Werten, die für dieses Event nützlich sein könnten oder die sich nicht unbedingt über einen Aufruf von
option
oder eine andere Plugin-Methode ermitteln lassen. Wird zum Beispiel ein Draggable auf ein Droppable gezogen, dann wird das Draggable-Element in
ui.draggable
an das drop-Event übergeben. Der Inhalt dieses
ui
-Hashs ist für jedes Plugin-Event verschieden.
    Beachten Sie, dass sich der Event-Name meistens von Event-Typ unterscheidet. So haben zum Beispiel sowohl Draggable als auch Slider ein Event
start
.Das ist der Event-Name. Die Typen des Events sind aber
dragstart
und
slidestart
. Da jedes Plugin seinen eigenen Namensraum besitzt, kann auch jedes den gleichen Options-Namen benutzen, hier also
start
:
$('img').draggable({
    start: function(event, ui) {
     //event.type == 'dragstart'
    }
});
$('#mySlider').slider({
    start: function(event, ui) {
     //event.type == 'slidestart'
    }
});
    Da aber Events im gleichen Namensraum gebunden und ausgelöst werden, wird ein Präfix erforderlich, um die Event-Typen eindeutig zu machen:
$('img').bind('dragstart', function(event, ui) {
     //event.type == 'dragstart'
    }
});
$('#mySlider').bind('slidestart', function(event, ui) {
     //event.type == 'slidestart'
    }
});
    Dieses Präfix ist meist der Name des Plugins, wie bei den Event-Typen
dialogfocus
,
tabsadd
und
progressbarchange
. In manchen Fällen wird stattdessen ein Verb als Präfix genommen, wenn dies besser passt. So verwenden Sie
dragstart
anstatt
draggablestart
und
slidestart
anstatt
sliderstart
.
    Wenn der Name des Typ-Präfixes der gleiche ist wie der des Events, wird er weggelassen, um Verdopplungen wie
dragdrag
oder
slideslide
zu vermeiden. In diesen Fällen entspricht der Event-Typ dem Event-Namen, also
drag
und
slide
.

14.10. Ein jQuery UI-Plugin zerstören
    Problem
    Sie brauchen ein bestimmtes Plugin nicht mehr und wollen das Element so zurückhaben, wie es vorher aussah. Dies ist mehr als
disable
– es ist ein De-
init
.
    Lösung
    Rufen Sie die Methode
destroy
auf:
$('#queue').sortable('destroy');
    Diskussion
    Ein Aufruf der Methode
destroy
setzt das Element für dieses Plugin komplett zurück. Es entfernt alle Klassen, die durch
init
oder andere Methodenaufrufe oder Events hinzugefügt wurden. Wenn das Element durch
init
in ein anderes Element verpackt wurde, wird es wieder ausgepackt. Es ist wie ein großes Undo.
    Das Zerstören eines jQuery UI-Plugins entfernt das Element nicht aus dem DOM. Es entfernt nur den Plugin-Status für dieses Element und versetzt es so gut wie möglich wieder in seinen ursprünglichen Zustand. Nachdem ein jQuery UI-Plugin zerstört wurde, kann es erneut initialisiert werden.
    Wollen Sie ein Plugin-Element gleichzeitig zerstören und entfernen, dann rufen Sie einfach
.remove()
auf. Die Methode
destroy
wird von jQuery UI automatisch aufgerufen, wenn das Element entfernt wird. Das gilt selbst dann, wenn das Element für mehr als ein jQuery UI-Plugin initialisiert wurde.

14.11. Einen Musikplayer mit jQuery UI erstellen
    Problem
    Sie benötigen einen Musikplayer, der eine Benutzeroberfläche mit den üblichen Steuerelementen bietet, egal ob die Musik über einen Flash Player, HTML 5 Audio oder eine andere Schnittstelle des Browsers abgespielt wird. Die Steuerelemente müssen barrierefrei, flexibel und mit einem Theme ausstaffierbar sein können. Dabei reichen aber ein paar grundlegende Features:
    Abspielen
Pause
Ein Slider, um die aktuelle Abspielposition anzuzeigen und steuern zu können
Ein Fortschrittsbalken, um zu zeigen, wie weit das Lied schon gepuffert wurde
Lautstärkeregler
    Neben diesen grundlegenden Features wollen Sie aber noch mehr Möglichkeiten anbieten können. Dieser Musikplayer muss skalierbar sein. Die gleiche Benutzerschnittstelle soll in jeder Größe funktionieren, egal ob der Player vom Browser, vom Anwender oder von der Anwendung in seiner Größe angepasst wurde – durchaus auch bis zur vollen Bildschirmgröße.
    Lösung
    Lassen Sie uns mit jQuery UI einen Musikplayer bauen. Wir werden die Buttons zum Abspielen und Pausieren mit Hilfe von Symbolen aus dem jQuery UI CSS Framework erstellen und für die Anzeige der aktuellen Position das jQuery UI-Plugin Slider nutzen. Der Fortschrittsbalken wird