Making jQuery Plugins Even More Designer-Friendly

The designers that I work with are great web designers. They make things look great. They are good at picking fonts, laying out elements, designing interactions. They aren’t great JavaScript developers and frankly I don’t want them to be.

In the web middle ground called user interface sometimes the designer wants more interactivity than HTML and CSS offer and turn to JavaScript and one of the many plug-ins that make user interactivity so easy. But then they are called upon to write a little JavaScript. They don’t use it every day and so in between use they sometimes get rusty. They forget the right syntax, the miss semi-colons, they use wrong selectors and make a host of other understandable mistakes.

Which begs the question – “Why are designers doing development work? Even light development work?”

I don’t want my designers writing JavaScript and as a CMS provider I definitely don’t want my customers writing JavaScript. So I came up with a simple remedy.

I have a standard practice that I think is worth sharing that I believe is making everyone’s lives easier. It isn’t too simple, but I think it is worth it.

tl;dr

The short version is that I make it so that the designer can write zero javascript to get a jquery plug-in, but still set options if desired. I do this through a combination of three things:

  • A standard CSS class that can be applied to the element to indicate that a certain plug-in should be applied.
  • Using data attributes for option values
  • On $(document).ready, I select for the class and apply the plug in with the options found in the data.

The Full Technique

Let’s start with a theoretical plug-in. This plug-in is called daveify. It takes 3 options: coolness, handsomeness and hilariousity. So normally you’d have:

<div id="dave1"></div>

plus:

$("#dave1").davify({
  coolness: "fonzi",
  handsomeness: 9.5,
  hilariosity: 8.75
});

What I ask the designer to do instead is:

<div class="davify" data-coolness="fonzi" data-handsomeness="9.5" data-hilariosity="8.75"></div>

What Does the Plug-in Look Like

It looks a lot like other jQuery plug-ins, except I run through each selected item and I use either the options that were passed to the plug-in method, the data values from the element itself or a default value. Please note that I am using my coalesce method to find the first non-null value. I have chosen to let the options win, but the data values be used if no option is specified.

(function ($) {
    $.fn.daveify = function (method) {
        var methods = {
            init: function (options) {
                if (options == null) options = {};
                this.each(function () {
                    var $this = $(this);
                    var coolness = $.coalesce(options.coolness, $this.data("coolness"), "ferris-buehler");
                    var handsomeness = $.coalesce(options.handsomeness, $this.data("handsomeness"), 5);
                    var hilariousity = $.coalesce(options.hilariousity, $this.data("hilariousity"), 5);
                    // Now do whatever it means to daveify something using the three variables above
                    // which clearly has something to do with trying to approximate some of my attributes, but if "fonzi" level coolness is all you need, you don't need to go to the full "dave" level (which takes a lot of processing power)
                }
            }
        }
        if (methods[method])
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        else if (typeof method === 'object' || !method)
            return methods["init"].apply(this, arguments);
        else
            $.error("Method " + method + " does not exist");
    }
})(jQuery);

Once I’ve got that, then its just a matter of making sure that the following is in my site template somewhere:

$(".daveify").daveify();

In action

You can see this technique in action in my slidebox jquery plugin.

 


So, what do you think ?