Writing jQuery plugins using Coffeescript

By : Shabda Raaj

So you want to write a Jquery plugin. If you know jQuery and Coffeescript, this would be amazingly easy.

I will walk you through writing a jQuery plugin which will allow us to add alternating colors to alternating rows.

Here is the plugin in its entirety.

$ = jQuery
$.fn.zebraTable = (options) ->
    defaults = 
        evenColor: '#ccc'
        oddColor : '#eee'

    options = $.extend(defaults, options)
    @each ->
        $("tr:even", this).css('background-color', options.evenColor)
        $("tr:odd" , this).css('background-color', options.oddColor)

Lets look at what we did.

  1. We bound $ to jQuery object.
  2. We created an anonymous functions and added this to jQuery, by assigning it to $.fn.zebraTable
  3. After this we will be able to do $("selector").zebraTable() or `$(selector).zerbraTable(optionsDict)
  4. This function will set background-color on alternating rows.

Lets look at the compiled Javascript output

(function() {
  var $;

  $ = jQuery;

  $.fn.zebraTable = function(options) {
    var defaults;
    defaults = {
      evenColor: '#ccc',
      oddColor: '#eee'
    };
    options = $.extend(defaults, options);
    return this.each(function() {
      $("tr:even", this).css('background-color', options.evenColor);
      return $("tr:odd", this).css('background-color', options.oddColor);
    });
  };

}).call(this);

And you can call it like this.

$(function() {
  $("table").zebraTable(  {
      evenColor: 'red',
      oddColor: 'yellow'
    });
});

Salient features.

  1. Since Coffeescript will enclose the code in a function $ = jQuery doesn't overwrite everything, and there is no need to enclose the plugin in its own closure.
  2. Inside the plugin this refers to the selected jQuery object, so there is no need to do $(this).

You can see the whole code on github here


Related Posts


Can we help you build amazing apps? Contact us today.

Topics : coffeescript

Comments

Adrien

Actually, you'd do it this way in a more coffeescriptish way : https://gist.github.com/1570840
Better to use wrap the code in a closure anyways, in case it gets compiled with -b

commmenttor
Shabda Raaj

Adrien: Thanks, I have updated the code.

commmenttor
Thomas 28th Jan., 2012

Another good way of wrapping the module, without using coffee-script's default closure is to put your code inside of:

jQuery ($) ->
#Yourcodehere

This sets up a closure that binds $ to the jquery root object in a really readable way.

commmenttor
iphone app development in india Blog

I like your post very much. it is very interesting and very useful for the iphone application developers. Thanks for sharing this valuable post.

commmenttor
Luis 1st May, 2012

I understand that you are probably using a simple case to illustrate how to create a jquery plugin, but I don't understand why you wrote that much boilerplate.
I got the same results with this version:

$.fn.zebraTable = ->

$("tr:even", this).css('background-color', 'grey')
$("tr:odd" , this).css('background-color', 'lightgrey')

Or better yet, without any jquery plugin, just a simple css class.

I guess there's a good reason for defining "options" and extending defaults, but why do you use "@each"?

commmenttor
Adam 17th May, 2012

@Luis i totally agree. Why use sword to use for stitching, when needle is enough. I don't see this post making any point apart getting some coffeescript buzz on his blog.

commmenttor
Alan Thomas

The alternating colors to alternating rows jQuery code will help the begginers . This is great move.Keep posting ...
Can i share my blog here?

commmenttor
© Agiliq, 2009-2012