As you can probably tell from the breadth of options presented in this chapter, you have a lot of ways to approach jQuery plugin development. There’s no one true way.
That means you need to choose patterns and options to follow depending on the goals of your plugin.
As the following code sample shows, the plugin takes a DOM element and, based on several of the lengthy available options, creates an HTML Canvas element in the same position and containing the same text as the target element. In this case, it’s pointed at all of the H1s on a page.
This simple example plugin uses Ben Alman’s Globally and Per-Call Overridable Options (Best Options Pattern) (as it’s called in the “Essential jQuery Plugin Patterns” article) to expose a hefty configuration object to both global and per-call configuration. Because it’s so heavily skewed toward the style of the Canvas element the plugin creates, the plugin needs to offer full-featured configuration. Because it could operate on many elements on a page, it made sense to allow for default configuration override as well as per-call configuration.
Even in this small plugin, you’ll see a variety of the techniques discussed earlier in this chapter:
- A semicolon leading into an immediately executing function expression
- $, window, document, and undefined passed in as variables to ensure that $ is always jQuery, undefined is always undefined, and to shorten lookups to document and window
- Configuration via an options object and the jQuery method $.extend
- Returning this to allow chaining of the method
- Exposing the default options for global configuration
.-(function ( $, window, document, undefined ) {
$.fn.canvasizr = function ( options ) {
options = $.extend( {}, $.fn.canvasizr.options, options );
return this.each(function () {
var $this = $( this ),
pos = $this.position(),
width = $this.outerWidth(),
height = $this.outerHeight()
+ parseInt( $this.css( “margin-top” ) )
+ parseInt( $this.css( “margin-bottom” ) ),
canvas = document.createElement( “canvas” ),
$canvas = $( canvas ),
ctx = canvas.getContext( “2d” );
$.extend( ctx,options );
canvas.width = width;
canvas.height = height;
ctx.fillRect( 0, 0, parseInt( width ), parseInt( height ));
if( options.border){
ctx.strokeRect( 0, 0, parseInt( width ), parseInt( height ) );
}
ctx.fillStyle = ctx.textColor;
ctx.fillText( $this.text(), 8, parseInt( height )/2 );
$canvas.css({
“position” : “absolute”,
“left” : pos.left +”px”,
“top” : pos.top +”px”,
“z-index”:1
});
$( “body” ).append( $canvas );
});
};
fn.canvasizr.options = {
textColor : “#ffffff”,
fillColor: “#ff0000”,
strokeStyle : “#000”,
border: false, font : “20px sans-serif”,
lineCap : “butt”, lineJoin : “miter”,
lineWidth : 1,
miterLimit : 10,
shadowBlur : 0,
shadowColor : “rgba(0, 0, 0, 0)”,
shadowOffsetX : 0,
shadowOffsetY : 0,
textAlign : “start”,
textBaseline : “alphabetic”
};
})( jQuery, window, document );
Code snippet is from canvasizr.txt
The following code sample shows the plugin in action. Initially, a default fill style is set for all instances of the plugin. Following that, the plugin is called twice, once on #special and once on a collection of three elements: #first, #second, and #third“. Different options are specified each time the plugin is called to produce different results. The output of this code can be seen in Figure 12-1.
$.fn.canvasizr.options.fillStyle = “#fe57a1”;
$( “#special” ).canvasizr({
font : “30px Consolas,’Lucida Console’,monospace”
});
$( “#first, #second, #third” ).canvasizr({
textColor : “#ffffff”,
fillStyle: “#ff0000”,
font : “40px sans-serif”,
border:true
});
Code snippet is from canvasizr-called.txt
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc