Eine kurze Erklärung, wie man ein eigenes jQuery-Plugin erstellt.
Hallo. Hier erkläre ich kurz, wie man sein eigenes jQuery-Plugin erstellen und anschließend auch benutzen kann. Das Beispiel, das ich verwenden werde ist nicht sehr sinnvoll, da es nur zur Demonstration dient. Es wird erklärt, wie man ein ganz einfaches Plugin erstellt und anschließend noch, wie man dieses Plugin mit eigenen Parametern verseht. Ihr solltet grundlegendes Wissen von jQuery besitzen.
Zu aller erst erstellen wir eine HTML-Seite mit dem Standardinhalt:
|
HTML Code
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<title>Eigenes Plugin</title>
</head>
<body>
</body>
</html>
|
Nun erstellen wir eine leere Javascript-Datei, speichern sie unter dem Namen "plugin_first" ab und binden sie ein. Natürlich dazu auch noch jQuery über Google. Nun fehlt uns noch eine Box, auf die wir unser Plugin verwenden. Dieser div geben wir die id "test_box", die Farbe rot, die Maße 100px * 100px und die Position absolute, da wir die Box später animieren werden. Der Code unserer HTML-Seite sollte nun in etwa so aussehen:
|
|
HTML Code
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!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>
</head>
<body>
<div id="test_box"></div>
</body>
</html>
|
Gehen wir zuerst zu unserer plugin_first-Datei. Um ein eigenes Plugin zu erstellen, beginnen wir mit $.fn.extend. Dies gibt praktisch bescheid, dass wir ein eigenes Plugin schreiben.
plugin_first.js
|
|
JavaScript Code
|
1
2
3
|
$.fn.extend({
});
|
Unsere eigene Funktion wird pluginOwn heißen. Um unser Plugin zu erstellen und zu benennen, machen wir folgendes:
|
|
JavaScript Code
|
1
2
3
4
5
6
7
8
|
$.fn.extend({
pluginOwn: function()
{
}
});
|
Um zu erreichen, dass auf jedes Element, das später ausgewählt wird die Funktion ausgeführt wird, schreiben wir zu aller erst Folgendes in unser Plugin:
|
|
JavaScript Code
|
1
2
3
4
5
6
7
8
9
10
11
|
$.fn.extend({
pluginOwn: function()
{
return this.each(function()
{
//Hier kommt unser Plugin rein
});
}
});
|
Als Beispiel nutzen wir jetzt einfach die animate Funktion, es kann aber auch jede andere jQuery- oder Javascript-Funktion benutzt werden.
plugin_first.js
|
|
JavaScript Code
|
1
2
3
4
5
6
7
8
9
10
11
|
$.fn.extend({
pluginOwn: function()
{
return this.each(function()
{
$(this).animate({top: '+=100px'}, 1000);
});
}
});
|
Durch das
$(this) wird das Element ausgewählt, das wir später mit der Funktion auswählen werden. Der eigentliche Effekt ist
animate({top: '+=100px'}, 1000). Das Element wird um 100 Pixel nach unten verschoben, dies geschieht mit einer Verzögerung von einer Sekunde.
Nun wollen wir das Plugin testen. Dazu fügen wir nach unserem style-Teil auf der HTML-Seite folgendes ein:
|
|
HTML Code
|
1
2
3
4
5
6
|
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('#test_box').pluginOwn();
});
</script>
|
Dies sollte sich von alleine erklären.Jetzt kann man die Datei im Browser öffnen und schaut da, die Box bewegt sich.
Man sieht ja bei jeder Funktion, dass auch Parameter übergeben werden. Dazu gehen wir wieder zu unserer Javascript-Datei.
|
|
JavaScript Code
|
1
2
3
4
5
6
7
8
9
10
11
12
|
$.fn.extend({
pluginOwn: function(pixel, zeit) //Diese Zeile
{
return this.each(function()
{
$(this).animate({left: '+='+pixel+'px'}, zeit);
});
}
});
|
Nach unsererm Namen schreiben wir in die Funktionsklammern, die jeweiligen Variablennamen, die wir mit der Funktion übergeben wollen. In unserem Fall um wie viele Pixel sich die Box nach rechts bewegt und wie lange sie dazu braucht. Anschließend werden diese Variablen in die Funktion eingesetzt.
Um dies jetzt zu testen, müssen wir unsere HTML-Datei auch noch anspassen. Wir schreiben dort in die Funktion, dass die Box sich um 250 Pixel verschieben soll und dafür 1250 Millisekunden brauch.
plugin_first.html
|
|
JavaScript Code
|
1
2
3
4
5
|
//ersetze:
$('#test_box').pluginOwn();
//durch:
$('#test_box').pluginOwn(250, 1250);
|
Eure Dateien sollten nun so aussehen:
plugin_first.js
|
|
JavaScript Code
|
1
2
3
4
5
6
7
8
9
10
11
12
|
$.fn.extend({
pluginOwn: function(pixel, zeit)
{
return this.each(function()
{
$(this).animate({top: '+='+pixel+'px'}, zeit);
});
}
});
|
HTML-Seite
|
|
HTML Code
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!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>
|
Hier gehts zum zweiten Teil:
jQuery: Eigenes Plugin [Part 2: Erweiterte Paramter]
Tags
Abstract
Article
Request deletion
report critical content
