CREATE YOUR OWN JQUERY PLUGIN

Basic structure

JQuery offers a very practical ad easy way to build plugins, as well as a very good documentation on this subject.
However, it could be useful to see how a plugin is written step-by-step.

The basis of creating a plugin for jQuery is quite simple actually: you don't have to be a jQuery ninja, neither you have to sweat blood to make it work. It's as easy as script writing!

Following the jQuery plugin authoring guidelins is a good idea; specifically, bear in mind that 1) plugins files should be named jquery.PLUGINNAME.js and 2) always attach your plugins to jQuery instead of $, so aliases can be easily set using the noConflict() method.

The structure required to extend the jQuery.fn object is



	jQuery.fn.firstPlugin = function () {

		return this.each (function () {

			alert (this.id);

		});

	}

You'd now be able to call you plugin as you normally wwould call any other plugin



	$('#test').firstPlugin ();

This would display a "nice" alert box showing the element id.

One step further: parameters

Ok, I agree the above example was a bit lame, so let's find out how a more complex plugin can b e developed.

For instance, you can code your plugin to require some parameters and accept other options as well. If your plugin was to need two numbers, you could write it in the folowing form:



	jQuery.fn.secondPlugin = function (number1, number2, options) {

		myoptions = jQuery.extend ({

			operation: "sum",

			label:     "The result is"

		}, options);

		

		$(this).html (myoptions.label + " (" + myoptions.operation + ")" + myoptions.number1+myoptions.number2);

	}

In the above code, mind the way we provide default settings in case the two strings are not passed to the plugin function.
This way we can call either



	$('#test').secondPlugin (1, 2);

to get



	<span id="test The result is (sum) 3</span>



	$('#test').secondPlugin (1, 2, { operation: "sums two numbers together", label: "We got" });

if you prefer



	<span id="test We got (sums two numbers together) 3</span>

The jQuery object: custom functions and selectors

Until now, we've messed with the jQuery.fn object, which is responsible for elements interaction, and we never mentioned the jQuery object itself, which handles internal processing.
By extending it, we are thus allowed to create our own functions and even selectors for others to use!

Here's how new methods can be added



	jQuery.fn.extend ({

		myFirstFunction : function ()        { alert ("first function") },

		thisIsTheSecond : function (message) { alert ("2nd: "+ message) }

	});

and then called without any problems



	$.myFirstFunction ();

	$.thisIsTheSecond ("hello");

In a very similar fashion you can create your own selectors, provided they don't exist yet.



	jQuery.expr[":"].startsWith = function (element, index, tokens) {        

		if (!tokens[3]) return false;

		return eval ("/^[/s]*" + tokens[3] + "/i").test ($(element).text());

	};

As you can see, the function takes three arguments, being: 1) the matched element, 2) the index of the element and 3) an object that contains parse tokens; the first element of the array is the full filter string (including parameters), the second one is the ":", the third one is the filter name and, finally, the fourth is the parameter.

You should always check wheter the parameter has been passed or not, since the filter could stop working in the latter case.

The above example comes into play whenever we want to select fields starting with a given string.



	$('#list li:startsWith(string)').css ('background-color', 'red');