Eigenes jQuery-Plugin selbst schreiben

Das JavaScript-Framework jQuery lässt sich ganz leicht mit eigenen Plugins erweitern. Wie das geht, seht ihr hier:

HTML-Code

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQuery Plugin Example</title>
  </head>
  <body> 
    <div id="my_div"></div>
    <script src="./js/jquery.js"></script>
    <script src="./js/my_jquery_plugin.js"></script>
  </body>
</html>

my_jquery_plugin.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(function($)
  {
    $.fn.myPlugin = function(title, params)
    {      
      var object = $(this);
      $.extend(object, params); 
      alert(title);
      alert(object.greeting);
      alert(object.isReceived);
      return this; // to allow jQuery chaining
    }
  })(jQuery);
 
$('#my_div').myPlugin('This comes from my jQuery plugin.',
{
  greeting: 'Hello World!',
  isReceived: true
});

my_jquery_plugin.js mit Standard-Einstellungen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(function($){
  $.fn.myPlugin = function(params)
  {      
    var settings = 
    {
      firstName:'Max',
      lastName:'Mustermann'
    };
    if (params) 
    { 
      $.extend(settings, params);
    }
    alert(settings.firstName+' '+settings.lastName);
    return this;
  }
})(jQuery);
 
$('#my_div').myPlugin({firstName:'Benny'});

my_jquery_plugin.js mit Funktionsnamen als Parameter

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
36
37
38
39
40
41

(function($)
  {
    function myRedFunction(element, settings)
    {
      $(element).css({
        width:'200px', 
        height:'200px', 
        backgroundColor:'red'
      }).html(settings.firstName+' '+settings.lastName);
    }
 
    $.fn.myPlugin = function(params)
    {
      var settings = 
      {
        firstName:'Max',
        lastName:'Mustermann',
        callback:myRedFunction
      };
      if (params) 
      { 
        $.extend(settings, params);
      }
      return settings.callback(this, settings);
    }
  })(jQuery);
 
function myBlueFunction(element, settings)
{
  $(element).css({
    width:'200px', 
    height:'200px', 
    backgroundColor:'blue'
  }).html(settings.firstName+' '+settings.lastName);
}
 
$('#my_div').myPlugin({
  firstName:'Benny', 
  lastName:'Neugebauer',
  callback:myBlueFunction
});

Eine gute Basis für ein jQuery-Plugin könnte wie folgt 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>
    <meta charset="utf-8" />
    <title>My jQuery-Plugin</title>
    <style type="text/css">
      * { margin: 0; padding: 0; border: 0; }
      html { background-color: wheat; }
      #testdiv
      {
        width: 400px;
        height: 400px;
        background-color: sienna;
      }
    </style>
  </head>
  <body>
    <div id="testdiv"></div>
    <script src="./js/jquery.js"></script>
    <script src="./js/my_jquery_plugin.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function($)
      {
        $('#testdiv').myPlugin();
      });
    </script>
  </body>
</html>

JavaScript Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

(function($)
  {
    function mergeSettings(parameters)
    {
      var settings = {
      };
      if (parameters) 
        $.extend(settings, parameters);
      return settings;
    }
 
    $.fn.myPlugin = function(parameters)
    { 
      var element = $(this);
      var settings = mergeSettings(parameters);
      alert('Plugin activated on: '+element.attr('id'));
      return element;
    }
  })(jQuery);

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.