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);


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



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

Shabda Raaj

Adrien: Thanks, I have updated the code.

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 ($) ->

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

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.

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"?

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.

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?

© Agiliq, 2009-2012