jQuery: Eigenes Plugin [Part 1: Grundlagen]

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Eine kurze Erklärung, wie man ein eigenes jQuery-Plugin erstellt.
    == Einführung ==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.
    == Anfang ==Zu aller erst erstellen wir eine HTML-Seite mit dem Standardinhalt:

    Quellcode

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <title>Eigenes Plugin</title>
    6. </head>
    8. <body>
    10. </body>
    11. </html>
    Alles anzeigen


    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:

    Quellcode

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <title>Eigenes Plugin</title>
    7. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    8. <script language="javascript" type="text/javascript" src="plugin_first.js"></script>
    10. <style type="text/css">
    11. <!--
    12. #test_box {
    13. width: 100px;
    14. height: 100px;
    15. background-color: red;
    16. position: absolute;
    17. }
    18. -->
    19. </style>
    21. </head>
    23. <body>
    25. <div id="test_box"></div>
    27. </body>
    28. </html>
    Alles anzeigen


    == Plugin erstellen ==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

    Quellcode

    1. $.fn.extend({
    3. });


    Unsere eigene Funktion wird pluginOwn heißen. Um unser Plugin zu erstellen und zu benennen, machen wir folgendes:

    Quellcode

    1. $.fn.extend({
    3. pluginOwn: function()
    4. {
    6. }
    8. });


    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:

    Quellcode

    1. $.fn.extend({
    3. pluginOwn: function()
    4. {
    5. return this.each(function()
    6. {
    7. //Hier kommt unser Plugin rein
    8. });
    9. }
    11. });
    Alles anzeigen



    == Funktion des Plugins ==Als Beispiel nutzen wir jetzt einfach die animate Funktion, es kann aber auch jede andere jQuery- oder Javascript-Funktion benutzt werden.

    plugin_first.js

    Quellcode

    1. $.fn.extend({
    3. pluginOwn: function()
    4. {
    5. return this.each(function()
    6. {
    7. $(this).animate({top: '+=100px'}, 1000);
    8. });
    9. }
    11. });
    Alles anzeigen


    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.


    == Testen ==Nun wollen wir das Plugin testen. Dazu fügen wir nach unserem style-Teil auf der HTML-Seite folgendes ein:

    Quellcode

    1. <script language="javascript" type="text/javascript">
    2. $(document).ready(function()
    3. {
    4. $('#test_box').pluginOwn();
    5. });
    6. </script>


    Dies sollte sich von alleine erklären.Jetzt kann man die Datei im Browser öffnen und schaut da, die Box bewegt sich.

    == Parameter übergeben ==Man sieht ja bei jeder Funktion, dass auch Parameter übergeben werden. Dazu gehen wir wieder zu unserer Javascript-Datei.

    Quellcode

    1. $.fn.extend({
    3. pluginOwn: function(pixel, zeit) //Diese Zeile
    4. {
    5. return this.each(function()
    6. {
    7. $(this).animate({left: '+='+pixel+'px'}, zeit);
    9. });
    10. }
    12. });
    Alles anzeigen

    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

    Quellcode

    1. //ersetze:
    2. $('#test_box').pluginOwn();
    4. //durch:
    5. $('#test_box').pluginOwn(250, 1250);


    == Fertig ==Eure Dateien sollten nun so aussehen:

    plugin_first.js

    Quellcode

    1. $.fn.extend({
    3. pluginOwn: function(pixel, zeit)
    4. {
    5. return this.each(function()
    6. {
    7. $(this).animate({top: '+='+pixel+'px'}, zeit);
    9. });
    10. }
    12. });
    Alles anzeigen


    HTML-Seite

    Quellcode

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <title>Eigenes Plugin</title>
    7. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    8. <script language="javascript" type="text/javascript" src="plugin_first.js"></script>
    10. <style type="text/css">
    11. <!--
    12. #test_box {
    13. width: 100px;
    14. height: 100px;
    15. background-color: red;
    16. position: absolute;
    17. }
    18. -->
    19. </style>
    21. <script language="javascript" type="text/javascript">
    22. $(document).ready(function()
    23. {
    24. $('#test_box').pluginOwn(250, 1250);
    25. });
    26. </script>
    28. </head>
    30. <body>
    32. <div id="test_box"></div>
    34. </body>
    35. </html>
    Alles anzeigen


    == Schlusswort: ==Hier gehts zum zweiten Teil: jQuery: Eigenes Plugin [Part 2: Erweiterte Paramter]

    8.855 mal gelesen