JQuery Kochbuch (German Edition)

Getter-/Setter-Methode
option
folgt dem gleichen Muster wie die jQuery-Getter und -Setter, z. B.
.css()
und
.attr()
. Wenn Sie einen Wert angeben, handelt es sich um einen Setter, lassen Sie ihn weg, dann ist es ein Getter.
    Wie bei anderen jQuery-Settern auch können Sie mehrere Optionen auf einmal setzen, indem Sie einen Hash übergeben:
$('#myDiv').accordion('option', {
    active: 2,
    collapsible: true
});

14.8. Plugin-Methoden von jQuery UI aufrufen
    Problem
    Sie müssen dafür sorgen, dass ein jQuery UI-Plugin etwas per Code ausführt.
    Lösung
    Rufen Sie die Methode mit dem Namen des jQuery UI-Plugins auf und übergeben Sie den Namen der Plugin-Methode als erstes Argument. Um zum Beispiel einen Dialog zu schließen, nutzen Sie folgende Anweisung:
$('#msg').dialog('close');
    Erwartet die Methode Argumente, dann übergeben Sie diese nach dem Namen der Methode. Um zum Beispiel die dritte Registerkarte auszuwählen, nutzen Sie folgende Anweisung:
$('#nav').tabs('select', 2); // Methode tabs erwartet Index bei 0 beginnend
    Diskussion
    Jedes jQuery UI-Plugin stellt mindestens die folgenden vier Methoden bereit:
    option
enable
disable
destroy
    Die Methode
option
wurde schon im vorigen Rezept behandelt. Die Methode
destroy
wird in einem späteren Rezept beschrieben. Die Methoden
enable
und
disable
sind eigentlich ziemlich selbsterklärend. Sie setzen die Option
disabled
für dieses Plugin, die standardmäßig auf false steht:
$('img').draggable('disable');

$('#mySlider').slider('enable');
    Ein Aufruf dieser Methoden fügt auch die Klasse
ui-pluginname-disabled
für dieses Element hinzu beziehungsweise entfernt sie wieder. Dies lässt sich für Styling-Zwecke oder zur Selektion nutzen.
    Um herauszufinden, ob ein Plugin aktuell deaktiviert ist, verwenden Sie die Methode
option
, um den Wert der Option
disabled
zu erhalten:
var isDisabled = $('#tempature').slider('option', 'disabled');

14.9. Mit Events von jQuery UI-Plugins umgehen
    Problem
    Sie müssen auf ein Event reagieren oder über seinen Aufruf informiert werden, das bzw. der für ein jQuery UI-Plugin geworfen wurde. Dabei kann es sich um das Öffnen eines Dialogs handeln, das Schließen eines Akkordeon-Panels oder eine Registerkarte, die selektiert wurde.
    In diesem Rezept werden wir uns mit einem Draggable beschäftigen, das auf ein Droppable gezogen wird. Dadurch wird das Event
drop
für das Droppable ausgelöst.
    Lösung 1: Eine Callback-Funktion für die Option mit dem Event-Namen übergeben
    Beim Aufruf von
init
oder später mit der Methode
option
können Sie eine Callback-Funktion deklarieren, die beim Auslösen des Events aufgerufen werden soll.
// Eine Event-Callback-Option bei init deklarieren
$('#shopping-cart').droppable({
    drop: function(event, ui) {
     addProduct(ui.draggable);
    }
});

// Einen Event-Callback nach init über die option-Methode deklarieren
$('#shopping-cart').droppable();
...
$('#shopping-cart').droppable('option', 'drop', function(event, ui) {
    addProduct(ui.draggable);
});
    Beachten Sie, dass Sie bei dieser Lösung nur eine Funktion angeben können, die beim Auslösen des Events aufgerufen wird. Ein Aufruf mehrerer Funktionen lässt sich über eine Proxy-Methode oder durch die im Folgenden gezeigte Bind-Lösung erzielen.
    Lösung 2: Über den Event-Typ an das Event binden
    Nutzen Sie die jQuery-Methode
.bind()
und binden Sie die Funktion an den Typ des Events:
// Eine Event-Callback-Option bei init deklarieren
$('#shopping-cart').bind('drop', function(event, ui) {
    addProduct(ui.draggable);
});
    Dieses Binden kann für das Plugin-Element selbst geschehen oder für einen Container. Bei letzterem können Sie das Event Bubbling und die Event-Delegation nutzen.
    Diskussion
    Jedes jQuery UI-Event erhält zwei Argumente:
event
und
ui
. Das event-Argument entspricht dem event-Argument, das auch alle Browser-Events erhalten, wie zum Beispiel
click
und
keypress
. Der Unterschied liegt nur darin, dass dies kein Standard-Eventobjekt ist.Wie bei Browser-Events finden Sie den Typ in
event.type
.
    Viele Events von jQuery UI-Plugins haben zugehörige Browser-Events, die sie üblicherweise auslösen. So wird zum Beispiel die Drag-and-Drop-Abfolge
dragstart
,
drag
,
dragstop
durch die Browser-Events
mousedown
,
mousemove
und
mouseup
ausgelöst. Wurde das Plugin-Event durch ein Browser-Event ausgelöst, dann finden Sie dieses ursprüngliche Event in der Eigenschaft
event.originalEvent
. Das kann sehr nützlich sein, wenn Sie herausfinden müssen, ob