11.052012

Plugins für jQuery entwickeln

Für jQuery gibt es im Netz schon unzählige Plugins für fast jeden Anwendungszweck. Gibt es aber mal ein gewünschtes Plugin nicht ist es sinnvoll darüber nachzudenken, ob man das Plugin selber entwickelt. Vorteile eines eigenen Plugins ist die zentrale Lösung und die hohe Wiederverwendbarkeit in weiteren Projekten. Nach der Fertigstellung kann man es auch veröffentlichen und anderen Entwicklern damit weiterhelfen.

Das Grundgerüst für ein jQuery-Plugin sieht folgendermaßen aus:

(function( $ ){
  var methods = {
     init : function( ) {
      ...
     },
     show : function( ) {
      ...
     },
     hide : function( ) {
       // ...
     }
  };

  $.fn.helloworld= function( method ) {
    if ( methods[method] ) {
      return methods[method].apply(
       this, Array.prototype.slice.call( arguments, 1 )
       );
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist' );
    }
  };
})( jQuery );

Das Plugin hat den Namen "helloworld" und hat 3 verschiedene Methoden (init,show,hide). In den Methoden lassen sich nun die gewünschten Funktionen integrieren. Natürlich lässt sich das Plugin um beliebig viele Methoden ergänzen.

Der Aufruf des Plugins erfolgt dann folgendermaßen:

$('#element1').helloworld();
...
$('#element1').helloworld('show');
...
$('#element1').helloworld('hide');

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