Introduction

I have long been a fan of the work at 960.gs, in my opinion, its simplistic approach in the layout and design of a web page will most likely interest others.

My interests in jQuery over the last couple of years have been equally as great (probably more). Mostly because I like the idea of how it simplifies JavaScript development into a reusable library so that I don't have to clutter my own development. So recently when I came across some JavaScript code at http://adapt.960.gs to make web pages adaptive to the changing sizes of web browser, naturally, I started looking into an even simpler approach.

Of course, I wanted something that could be done in the form of a jQuery plugin and that would ease my daily development.

So in this article, I will go over the details of developing a jQuery plugin, while at the same time creating something that we all can use in our daily development.

Background

Ok so for all you jQuery developers out there (both old and new), you probably know how you want a plugin to work right?

Personally, I am always amazed with those plugins where you, as the developer, using them write like one line of code and then all this really cool stuff just happens. You know the kind of stuff that would have normally taken you several dozen or even worse several hundreds of lines of code to write (not to mention the hours).

Don't get me wrong, I love the complex problems, but once they have been solved by me or someone else, then my interest level diminishes. There are only so many ways to improve the design of a wheel in my opinion.

I want something like the following to fit neatly into a script block on a web page:

// variable to hold instance of my pluginvar plugin;
$(function() {
plugin = new $.jQueryAdaptive960(window);
// other code to be run on page load
});

Basics of a jQuery Plugin

Let's go over the quick basics of a jQuery plugin by showing a simple framework for the layout of one.

The first and last line of the plugin are how we make this control become a part of jQuery as well ensuring that we still have access to jQuery itself. We have this awesome framework so we want to make sure that in our plugin development we can still use it.

The entry into our plugin starts with the $.jQueryAdaptive960 = function(element, options) where the plugin object is created as well as the receiving objects it will work with.

The first parameter to our jQuery plugin, element, and in about 99% of the cases where you develop a jQuery plugin, you find the control or page element. In the case of this plugin, we will be passing the window for reasons to be explained later.

The second parameter is simply any options that the page developer and user of the plugin may want to pass in. Very important that you understand the options passed into the plugin are optional because sometimes the developer will just want the thing to work. We will see later in the init function how we handle this scenario.

Now let's move on to the meatier side of the plugin.

Plugin Settings

Remember that I said it is important to understand that some developers will never want to pass any options into your plugin. Taking this into consideration, you will want to make sure that your plugin has a default set of options of which to operate with. We handle this by creating an object to contain our defaultOptions that we will be using.

I don't want to get into the details of object oriented programming with JavaScript but the following will be how we expose our public properties to the outside world:

// save the elementvar pluginElement = el;
var jQuery960 = this;

For all of you object oriented purists out there (yeah you know who you are), please don't flame an argument about how JavaScript is not an object oriented language.

Whatever is assigned to jQuery960 will now become a publicly accessible property, or function to whoever uses the plugin.

Finally, we save the element passed to us in pluginElement that we can reference it in other areas of code.

Plugin Initialization

One more step, and then you get your official (well maybe not official) badge as a jQuery Plugin Magician. Since we have already included the jQuery framework, this final step is simplified even further for us.

Remember I mentioned that sometimes a developer will want to just use your plugin without passing any parameters? Well in the initialization of the plugin, we will handle this scenario by checking to see if something was passed in. In the event that we did receive something, we are going to use the jQuery $.extend() function call to update our default settings.

Finally, at the very end of the plugin, we will make a call to the init() function which will make sure that everything gets initialized. As a note of personal importance, I like to have the init() be the last line in a plugin, it ensures that everything has been loaded and is fully accessible to the rest of the plugin.

Using the Code

So now that the basics of the plugin are taken care of, let's put together a working example of how to use it.

By now I am assuming you have had a chance to review http://adapt.960.gs because the goal is to fashion that into a jQuery plugin. Remember the goal is to give the users of our plugin something simple that takes care of everything for them. I am thinking that something like the following will work:

// variable to hold instance of my pluginvar plugin;
$(function() {
plugin = new $.jQueryAdaptive960(window);
// other code to be run on page load
});

Default Settings

So in the direction of keeping things simple, I thought it best to bundle all of the required CSS files with the plugin. At the same time, I want to make sure to cater as much as possible to those looking to take things a step further.

The following should be enough to support both developers and their individual use:

To make this plugin extensible, I make both the ranges and the path for the CSS information an option that can be replaced by developers. Then I added two callback functions so that the developer can be notified when the browser is being resized as well as rotated.

If you have read through the code at http://adapt.960.gs, you will notice they had a dynamic variable to turn on/off the dynamic abilities to update the page. At first, I had that option configurable but then I thought if they don't want it be dynamic then they most likely won't have a need for the plugin.

Plugin Initialization

With the settings all in place, now let's move on to the initialization of the plugin. Our initialization steps should be fairly simple. Most of what we are going to be handling in this step is the subscription to events to notify the plugin of when the browsers size has changed or it has been tilted.

As said before, basically everything being done is to subscribe events. This should give the plugin the ability to work across most (hopefully all) of the browsers in operation. The important part to take note on is the last line where a call to adaptDisplay() is made.

Active Screen Adaptations

I don't intend to go over every line of code in the function adaptDisplay(), the details of what is happening lie in the while loop as it iterates through defaultOptions.ranges searching for a range that fits with the browser's current dimensions.

In the case of our default settings for the plugin, a valid range containing a CSS file will always be found to match with the browsers current size. You will notice as you resize the browser this code gets exercised and if you view the source of the page (not the original source), you will see the link for the CSS file being changed.

The page adapting itself to the new size is the inner working of the browser in conjunction with CSS file that it was informed to render against.

Viewing Page Source

Important Note

When viewing the page source, make sure that you are viewing the active document. If you don't see a line in the header that looks similar to the following...

<linkhref="jquery960/css/###.css"rel="stylesheet"/>

...then you most likely are not viewing the page's active source.

Notification Events

The important thing to take note of in all of the notification handlers is how they handle notification back to the developer using the plugin. Remember the original idea was to allow a developer to use the plugin and only have to supply the window that it will be working with. This scenario is handled by giving the callback functions a default function handler.

Share

About the Author

I am software developer with over 20 years of professional experience. I have been employed as a software developer since the early 90′s back when Microsoft’s Windows 3.1x was gaining popularity and IBM’s OS/2 was the predominant leader in 32-bit PC based Operating Systems.

Prior to choosing this as my profession I had studied architecture and then later Electrical and Mechanical engineering in college. As a young kid growing up I always played with computers, my first computer was a TRS-80 that I would spend countless hours writing programs for, I never really thought of programming as a profession. The story goes that in my final year of college I took a C/C++ programming class and had so much fun working on the various projects that my professor told me something that changed everything.

“You know they pay people to do stuff like this for a living?” – Professor Bolman