jQuery: Eigenes Plugin [Part 2: Erweiterte Paramter]

JaffaCoder

Professional

Lexicon articles: 4

Sunday, December 4th 2011, 11:17am

Content

Article

1. Einführung

Dies ist die Fortsetzung zum ersten Teil http://www.easy-coding.de/wiki/html-ajax-und-co/jquery-eigenes-plugin-part-1-grundlagen.html, in dem die Grundlagen erklärt wurden. In diesem Teil erkläre ich, wie man erweiterte Parameter hinzufügt.

2. Vorbereitung

Nehmen wir unsere Beispieldateien, vom vorherigen Teil.

plugin_first.js

JavaScript Code

$.fn.extend({
 
    pluginOwn: function(pixel, zeit)
    {
        return this.each(function()
        {
            $(this).animate({top: '+='+pixel+'px'}, zeit);
 
        });
    }
 
});

HTML:

HTML Code

<!DOCTYPE html>
<html>
 
<head>
    <title>Eigenes Plugin</title>
 
    <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script language="javascript" type="text/javascript"  src="plugin_first.js"></script>
 
    <style type="text/css">
    <!--
        #test_box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    -->
    </style>
 
    <script language="javascript" type="text/javascript">
       $(document).ready(function()
       {
            $('#test_box').pluginOwn(250, 1250);
       });
    </script>
 
</head>
 
<body>
 
    <div id="test_box"></div>
 
</body>
</html>

Nun fangen wir an. Zuerst wenden wir uns unserer JS-Datei zu. Um mehrere Parameter und vorallem default-Parameter setzen zu können übergeben wir keine einzelnen Variablen, sondern gleich ein ganzes Objekt, was wir so machen, wenn unser Objekt 'paras' heißt:

JavaScript Code

$.fn.extend({
 
    pluginOwn: function(paras)
    {
        return this.each(function()
        {
            $(this).animate({top: '+='+pixel+'px'}, zeit);
 
        });
    }
 
});

4. Default-Parameter

Momentan haben wir ein Objekt mit den Paramtern, die übergeben werden. Jetzt können wir auch noch Default-Paramter setzen, indem wir ein Objekt erstellen, das die Default-Parameter enthält und dieses anschließend mit unserem ersten Objekt zusammenführen:

JavaScript Code

$.fn.extend({
 
pluginOwn: function(paras)
{
var defaults = {
speed: 1500,     //Diese Default-Werte werden
art: top;       //später zu unserem 'paras'-Objekt hinzugefügt,
movement: '500';   //wenn 'paras' diese Eigenschaften noch nicht hat
};
 
var paras = $.extend(defaults, paras); //Zusammenführung der beiden Objekte
 
    return this.each(function()
    {
        $(this).animate({paras.art: '+='+paras.movement+}, paras.speed); //Normaler Zugriff auf die Eigenschaften eines Objekts
    });
}
});

5. PlugIn nutzen

Da wir nun unser Plugin fertig haben, können wir es ausprobieren. Da es nun über Default-Werte verfügt gibt es verschiedenste Möglichkeiten:

JavaScript Code

<script language="javascript" type="text/javascript">
   	$(document).ready(function()
   	{
   			//Nur die Eigenschaft 'speed' gesetzt. Da wir aber Defaultsettings haben sind jetzt 'art' top und 'movement' 500;
        	$('#test_box').pluginOwn({speed: 1500});
   	});
	</script>

JavaScript Code

<script language="javascript" type="text/javascript">
   	$(document).ready(function()
   	{
        	$('#test_box').pluginOwn({movement: '250', art: left});
   	});
	</script>

JavaScript Code

<script language="javascript" type="text/javascript">
   	$(document).ready(function()
   	{
        	$('#test_box').pluginOwn({art: top});
   	});
	</script>