Archive for October, 2012

Creating a jQuery Extension

jQuery extensions are the most fundamental piece to the jQuery library.  When you create functions that build on jQuery, you should always ask yourself if your function or group of functions would be valuable as a reusable jQuery extension.

Learning to create a jQuery extension is relatively simple. It is all about encapsulating your functions into a larger object that prevents them from interfering with each other.

Creating Our jQuery Work Space

Before we can begin creating the meat of the jQuery extension we’ll need to set up our work space, which is where all of our jQuery goodness will go. I usually begin by naming my jQuery extension and creating a shell where all of my functionality will go:

(function (p) {
 p.fn.Talk = function (settings) {
 // Saving Settings
 var customSettings = $.extend({

 }, settings);

 // Methods
 methods = {

 };
})(jQuery);

This will be the basic layout of the Talk jQuery extension we’ll be creating.  More on the Methods & Settings we’ll be setting up are below.

Creating Extension Settings

The best way to store data and pass data to your jQuery extension is to use a group of settings defined in the beginning of the application and then extend them with variables passed to the jQuery extension.

Now lets fill our talk extension with some useful settings. I’ve chosen to use message, backcolor, forecolor, and bordercolor for my group of settings.

var customSettings = $.extend({
 message: "What's Up?",
 backcolor: "#F8F8F8",
 forecolor: "#666",
 bordercolor: "#DCDCDC",
 }, settings);

Now, you’ll notice that I’m using the $.extend() method. If you’ve never used this before, essentially what it does is tak the array provided and merge it with the existing default settings, overwriting the default values if a message, backcolor, forecolor, or bordercolor is provided.

To pass settings to our jQuery extension, we would simply provide an array similar to the one we’ve defined above:

$('#TalkBox').Talk( { bordercolor: 'red', backcolor: 'blue' } );

Applying this settings to our extension will overwrite the default color and change the text color to blue and the back color to blue. While this will undoubtedly make for an ugly message, it serves as a good example.

Creating Extension Functions

Now, this is where the meat of our application goes. We have our framework laid out and our settings prepped, so lets create our functions.  First, we’ll say Hi, then output the user’s message, and finally say Goodbye.  Pretty simple, but this is only an example.

Before we output our message, lets do a simple variable to hold our message container and save the object we’re outputting to ($(this)) for easy access in our functions.

var talkBox = $(this);
var containerOpen = "<div style='background-color:" + customSettings['backcolor'] +
 ";color:" + customSettings['forecolor'] + ";border: 1px solid " +
 customSettings['bordercolor'] + ";padding: 10px; margin: 5px;'>";
 var containerClose = "</div>";
Now that we have that settled, lets add our functions to output the three messages we'll be using in this jQuery extension.
 // Methods
 methods = {
 SayHi: function () {
 talkBox.append(containerOpen + "Hello!" + containerClose);
 },
 SayMessage: function () {
 talkBox.append(containerOpen + customSettings['message'] + containerClose);
 },
 SayBye: function () {
 talkBox.append(containerOpen + "Goodbye!" + containerClose);
 }
 };

Finally, We’ll need to execute these functions.  To do so, you simply call them from the ‘methods’ array like so:

// Outputting Messages
 methods['SayHi']();
 methods['SayMessage']();
 methods['SayBye']();

Put It All Together

Well, that’s all there is to it. if you’ve followed the steps above, you’ve created your very own jQuery Extension!  Now to make it easier on you, I’ve put it all together below:

(function (p) {
 p.fn.Talk = function (settings) {
 // Saving Settings
 var customSettings = $.extend({
 message: "What's Up?",
 backcolor: "#F8F8F8",
 forecolor: "#666",
 bordercolor: "#DCDCDC",
 }, settings);
var talkBox = $(this);
var containerOpen = "<div style='background-color:" + customSettings['backcolor'] +
 ";color:" + customSettings['forecolor'] + ";border: 1px solid " +
 customSettings['bordercolor'] + ";padding: 10px; margin: 5px;'>";
 var containerClose = "</div>";
// Methods
 methods = {
 SayHi: function () {
 talkBox.append(containerOpen + "Hello!" + containerClose);
 },
 SayMessage: function () {
 talkBox.append(containerOpen + customSettings['message'] + containerClose);
 },
 SayBye: function () {
 talkBox.append(containerOpen + "Goodbye!" + containerClose);
 }
 };
 // Outputting Messages
 methods['SayHi']();
 methods['SayMessage']();
 methods['SayBye']();
 }
 })(jQuery);

More Information

The jQuery website is always a great help.  I have to give credit to them for outlining the process so well on their site and teaching me how to create jQuery extensions. For more information, you can visit the page below.  They have more detailed information on do’s and don’ts and the process of creating an extension.

http://docs.jquery.com/Plugins/Authoring#Getting_Started

Thanks for reading! Feel free to submit comments/suggestions below!

Advertisements