JQuery Kochbuch (German Edition)

verwenden, als die vom Plugin-Autor vorgegebenen Standardwerte.
    Lösung
    Geben Sie eigene Optionen in einem Options-Hash als erstes Argument der Plugin-Methode
init
an:
$('#myDiv').dialog({
    height: 100, // überschreibt Standardwert: 'auto'
    width: 350 // überschreibt Standardwert: 300
});
    Diskussion
    Alle Options-Werte, die Sie bei
init
angeben, überschreiben die Standardwerte. Für alle nicht angegebenen Options-Werte werden die Standardwerte verwendet.
    Der Options-Hash – egal ob nur aus Standard-Optionen bestehend oder mit ein paar eigenen Optionen versehen – ist die Grundlage für den initialen Status des Plugins. Dieser Status ist spezifisch für die Kombination aus
DOMElement
und jQuery UI-Plugin. So können Sie zum Beispiel ein einzelnes Element mit zwei unterschiedlichen jQuery UI-Plugins initialisieren, die beide eine Color-Option besitzen:
$('#myDiv').foo({ color: 'black' });
$('#myDiv').bar({ color: 'green' });
    Was ist jetzt die
foo
-Farbe für
#myDiv
? Schwarz. Und für
bar
? Grün. Beide sind unabhängig von den CSS-Farben. Wir werden uns in einigen Rezepten in diesem Kapitel darum kümmern, wie man Elemente nach ihren Plugin-Werten befragen oder neue Werte zuweisen kann.
    Genauso wichtig ist, dass
#myDiv
jetzt als
foo
und als
bar
initialisiert ist und nicht länger durch diese Plugin-Standardwerte beeinflusst wird. Die Standardwerte werden nur für
init
als Vorlage für den initialen Status des Plugins genutzt.

14.6. Eigene jQuery UI-Plugin-Standardwerte erstellen
    Problem
    Wenn Sie einen jQuery UI-Dialog erstellen, geben Sie neben individuellen Optionen immer die gleichen Optionen an:
$('#msg').dialog({
    height: 300,
    width: 400,
    draggable: false,
    modal: true,
    buttons: {
     'OK': function(event, ui) {
     $(this).dialog('close');
     }
    }
    ...
});
    Sie wünschen sich, dass Ihr Code wieder so knapp und bündig wird, wie er früher einmal war. Was ist aus der schlichten Eleganz von
$('#msg').dialog();
geworden?
    Lösung
    Überschreiben Sie die Standardwerte des Plugins vor dem Aufruf von
init
, indem Sie
$.ui.pluginname.defaults
erweitern:
$.extend($.ui.dialog.defaults, {
    height: 300,
    width: 400,
    draggable: false,
    modal: true,
    buttons: {
     'OK': function(event, ui) {
     $(this).dialog('close');
     }
     }
});
...
$('#msg').dialog();
...
$('#note').dialog();
    Diskussion
    Wenn Sie nur die Lesbarkeit ein bisschen verbessern wollen, können Sie die Optionen auch einfach in eine Variable stecken und diese an die Plugin-Methode
init
übergeben:
var options = {
    height: 300,
    width: 400,
    draggable: false,
    modal: true,
    buttons: {
     'OK': function(event, ui) {
     $(this).dialog('close');
     }
    }
};

$('#msg').dialog(options);
    Aber bei diesem Rezept geht es um mehr als nur um Lesbarkeit und schönen Code. Es geht darum, das Standardverhalten eines Plugins zu verändern, das Sie nicht selbst geschrieben haben. Zudem können Sie so zum einfachen
init
ohne Optionen zurückkehren:
$('#msg').dialog();
    Wie Dave Methvin schon sagte: »Kürzer ginge es nur noch, wenn es Ihre Gedanken lesen würde.«
    Natürlich können Sie immer noch selbst diese eigenen Standardwerte überschreiben, indem Sie beim Aufruf von
init
eigene Optionen übergeben (wie im vorigen Rezept).
    Vergessen Sie nicht, dass Plugin-Optionen beim Aufruf von
init
aus den Standard-Optionen geklont und erweitert werden. Wenn Sie also
$.ui.dialog.defaults
erweitern, nachdem ein