Schlagwort: Plugin

jQuery Plugin mit Prototyp und destroy()-Funktion

In „[post id=“2884″][/post]“ habe ich gezeigt, wie man ganz einfach ein eigenes jQuery Plugin schreiben kann. Aus Speicherplatzgründen empfiehlt es sich aber Plugins, die mehrfach instanziiert werden, mit einem Prototypen anzulegen. Wie das funktioniert, soll folgender Code exemplarisch zeigen.
jQuery Plugin mit Prototyp und destroy()-Funktion weiterlesen

Minify and obfuscate code with Maven

In a production site you always want to have minified and obfuscated code (i.e. CSS and JavaScript files) so that the file content is as small as possible because this will save bandwidth and loading time. The best known and easiest tool for this is the YUI Compressor from Yahoo!.

In a Java Enterprise application, the YUI Compressor can be integrated very easy with Maven. All you need is the Maven Minify Plugin. That’s how to use it:
Minify and obfuscate code with Maven weiterlesen

Image preloader with jQuery

Today I saw a tiny JavaScript code on Stack Overflow which can be used as a jQuery plugin for preloading images. It is very handy and can be used easily:

jQuery.fn.preload = function() 
{
  this.each(function()
  {
    $('<img/>')[0].src = this;
  });
}
 
jQuery(document).ready(function($)
{    
  $(['./images/image1.png', './images/image2.png']).preload();
});

I use this function to preload drag images which are used by event.dataTransfer.setDragImage but you can still preload everything else. It makes also much sense for hover images.

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);

How to create a WordPress plugin with a custom database table

You can create a custom table for the data of your WordPress plugin if you hook on the plugin activation. This has the effect that your custom table will be created if you activate the plugin in the WordPress backend. I created a sample code to show you how this works.
How to create a WordPress plugin with a custom database table weiterlesen