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> |
<!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
}); |
(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'}); |
(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
}); |
(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> |
<!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); |
(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);