Schwierigkeit/Anforderungen: Fachausdrücke wie Objekt, Parameter oder Framework sollten geläufig sein, außerdem sollte man die Funktionsweise von jQuery Plugins kennen.
Benötigte Software/Frameworks jQuery Framework
Verwendete Technik JavaScript
Einleitung
Eine eigene jQuery Funktion bzw. ein eigens jQuery Plugin zu erstellen ist oft nach ein wenig Einarbeitung in JS(JavaScript) und JQ(jQuery) ein echtes Ziel.
Der Vorteil eines JQ Plugins ist die einfache Mehrfachverwendung.. bzw. allgemein eine einfache, schon bekannte Verwendung von JQ Plugins.
Ein typischer Aufruf eines solchen JQ Plugins:
$('selector').plugin({
option1: 'value'
});
Die erste Zeile des Plugins
Unser Ziel ist es ein Plugin zu erstellen, was beim klicken auf das Element, ein bestimmtes Attribut setzt.
Zuerst erstellen wir eine anonyme, selbst aufrufende Funktion, in der unsere Funktion dann definiert wird. Dadurch schützen wir unser typisches JQ $ vor Kompatibilitätsproblemen mit anderen Frameworks und haben gleichzeitig einen schönen Wrapper der das Setzten/Ändern globaler Variablen verhindert.
/**
* anonymus function to increase compatibility problems with other frameworks
*
* @param object $ jQuery framework
*/
;(function($){
})(jQuery);
Funktionsdefinition mit Parameter
Anschließend definieren wir unsere Funktion mit einem Parameter (options) an den spezifische Einstellungen übergeben werden können.
'AttrSet' ist der Name der Funktion
/**
* plugin AttrSet jQuery plugin to set a specific attribute on click
*
* @param object options contains specific options for the plugin; if unset or some key unset, defaults are used
*/
$.fn.AttrSet = function(options){
}
Standartwerte und Optionen
Wir definieren ein paar Standard werte und ersetzten diese, wenn durch options andere werte gesetzt werden. Das ganze werden dann unsere Einstellungen für das Plugin. Aus Faulheit sind in meinen JS oft benutze variablen unter Abkürzungen zun erreichen, in diesem Fall kann man die Einstellungen über 'settings' oder eben '_' aufrufen, dies hat den Vorteil nicht jedes mal settings schreiben zu müssen, allerdings erschwert es teilweise die Lesbarkeit. Jeder so wie er mag.. 
Zusammen sieht das so aus
/**
* anonymus function to increase compatibility problems with other frameworks
*
* @param object $ jQuery framework
*/
;(function($){
/**
* plugin AttrSet jQuery plugin to set a specific attribute on click
*
* @param object options contains specific options for the plugin; if null or some key unset, defaults are used
*/
$.fn.AttrSet = function(options){
/**
* var object defaults contains the default plugin settings
*/
var defaults = {
/**
* string attribute the (complete) attribute what goes set after the click
*/
attribute: 'data-selected',
};
/**
* @var object settings contains the active plugin settings
* @var object _ contains the active plugin settings
*
* use one of the both variables to refere to the settings
*/
var settings = _ = $.extend(defaults, options);
}
})(jQuery);
Natürlich braucht man kein Objekt wenn darin sowieso nur ein key/value pärchen ist, allerdings werdet ihr nach und nach merken das man doch mehr als einen oder zwei parameter gerne mitgibt..
Benutzen von this
Jetzt wollen wir auf den Klick reagieren.
Um den entsprechenden EventHandler setzten zu können, benötigen wir das HTML-Element, worauf die Funktion initialisiert wurde.
Dieses steckt immer in 'this', der Performance wegen konvertieren wir dieses einmal zu einem jQuery Objekt/Element und speichern dieses in '$this'
/**
* @var object $this holds the plugins init element
*/
var $this = $(this);
Nun können wir den Klick-Handler definieren. Innerhalb des Click-Handlers steckt das geklickte Element wieder in 'this' .. gleiches Spielchen..:
/**
* initialize the event handler for the click event
*/
$this.on('click', function(){
$this = $(this);
}
Funktionalität hinzufügen & callback Funktion
Im nächsten schritt sorgen wir dafür, dass das Attribut gesetzt wird und fügen eine Funktion (callback) hinzu, die nach dem setzten das Attributes aufgerufen wird und an die zwei Parameter übergeben werden:
/**
* anonymus function to increase compatibility problems with other frameworks
*
* @param object $ jQuery framework
*/
;(function($){
/**
* plugin AttrSet jQuery plugin to set a specific attribute on click
*
* @param object options contains specific options for the plugin; if null or some key unset, defaults are used
*/
$.fn.AttrSet = function(options){
/**
* @var object defaults contains the default plugin settings
*/
var defaults = {
/**
* string attribute the (complete) attribute what goes set after the click
*/
attribute: 'data-selected',
/**
* function callback got called after the attribute was set
* @param object element clicked DOM element
* @param object settings current settings
*/
callback: function(element, settings){}
};
/**
* @var object settings contains the active plugin settings
* @var object _ contains the active plugin settings
*
* use one of the both variables to refere to the settings
*/
var settings = _ = $.extend(defaults, options);
/**
* @var object $this holds the plugins init element
*/
var $this = $(this);
/**
* initialize the event handler for the click event
*/
$this.on('click', function(){
$this = $(this);
/**
* add the attribute(defined in the settings) to the clicked element
* call the callback after doing that
*/
$this.attr( _.attribute, true );
_.callback( this, _ );
});
}
})(jQuery);
zur besseren code-überfliegbarkeit 
hier mal ohne diese ganzen Block-Kommentare
;(function($){
$.fn.AttrSet = function(options){
var defaults = {
attribute: 'data-selected',
callback: function(element, settings){}
},
settings = _ = $.extend(defaults, options),
$this = $(this);
$this.on('click', function(){
$this = $(this);
$this.attr( _.attribute, true );
_.callback( this, _ );
});
}
})(jQuery);
Komprimierung
Wenn man das Plugin life nutzen will, sollte man es vorher mit einem tool wie http://jscompress.com/ komprimieren, um Dateigröße einzusparen.
!function(t){t.fn.AttrSet=function(c){var n={attribute:"data-selected",callback:function(){}},a=(_=t.extend(n,c),t(this));a.on("click",function(){a=t(this),a.attr(_.attribute,!0),_.callback(this,_)})}}(jQuery);
Am besten nennt man es dann nach diesem schema
<framework>.<plugin>.<art>.[<version>.]js
Also z.B. jquery.attrset.min.js
Aufrufen
Und schon ist das Plugin fertig, wir müssen es nurnoch aufrufen und unsere parameter übergeben..
//aufrufen der Funktion ohne Parameter (defaults werden benutzt)
$('selector').AttrSet();
//aufrufen mit verändertem 'attibut'
$('selector').AttrSet({
attribute: 'data-my-own-attribute'
});
hier in Action
Hoffe es ist alles verständlich, ansonsten fragt einfach & korrigiert mich wenn was nicht richtig ist c:
)