31.052012

jQuery Plugins mit Parameterübergabe

Im vorherigen Post zum Thema jQuery Plugins habe ich beschrieben wie man eigene Plugins für jQuery erstellt und welche Vorteile das bringt. In diesem Post möchte ich zeigen wie man seine Plugins noch flexibler mit der Überabe von Parametern gestalten kann.

Parameter können z.B. für Farben, Größen und Textbausteine innerhalb der Anwendung genutzt werden. Jeder der dieses Plugin dann verbaut hat so die Möglichkeit das Plugin anzupassen ohne die passende Stelle im Javascript oder CSS suchen zu müßen. Ideal auch bei der Verwendung an mehreren Stellen auf einer Webseite, die sich nur optisch oder textlich unterscheiden.

Das Grundgerüst für ein Plugin mit Parameter-Übergabe sieht folgendermaßen aus:

(function( $ ){
  var methods = {
    init : function(options) {
      var settings = $.extend({
        "parameter1" : "standardwert",
      },options);
    }
  };
...
  $.fn.helloworld= function( method ) {
....
  }

In diesem Beispiel gibt es den Parameter "parameter1". Wird die Funktion ohne diesen Parameter aufgerufen, enthält er den Inhalt "standardwert".

Die Funktion kann nun mit dem Parameter aufgerufen werden:

$('#element1').helloworld("init",{ "parameter1" : "meinwert"});

Innerhalb der Init-Funktion kann der Parameter über die Variable settings["parameter1"] angesprochen und verwendet werden.

  alert(settings["parameter1"]);

Weitere Informationen zur Erstellung von jQuery-Plugins findest Du unter:
http://docs.jquery.com/Plugins/Authoring