Tag: jQuery

…and I like the new .on() and .off() API for setting up events.

I wrote some code that uses it, just for practice.

$.fn.tree = function(data) {
  var $el = $(this),
      html = [];
  
  function renderNode(node) {
    if (typeof node === "object") {
      html.push("<ul>");
      for (var key in node) {
        if (node.hasOwnProperty(key)) {
          html.push("<li><strong>" + key + ": </strong>");
          html.push(typeof node[key] == "object" ? renderNode(node[key]) : node[key]);
          html.push("</li>");
        }
      }
      html.push("</ul>");
    }
  }
  
  renderNode(data);
  $el.html(html.join(""));
  
  $el.on('click', 'strong', function() {
    $(this).closest('li').find('ul').toggle(200);
  });
};

$("<div>").appendTo("body").tree({
  name: {
    first: "Benjamin",
    last: "Atkin"
  },
  location: {
    city: "Boulder",
    state: "CO"
  },
  accounts: {
    social: {
      twitter: "http://twitter.com/benatkin",
      facebook: "http://facebook.com/atkin",
      gplus: "http://gplus.to/benatkin",
      identica: "http://identi.ca/benatkin",
      rstatus: "http://rstat.us/bat"
    },
    creative: {
      github: "http://github.com/benatkin",
      blog: "http://benatkin.com/"
    }
  }
});

Nothing too fancy.

JavaScript is a prototyping programming language, and as such, has many different ways to define classes or create objects. If you try to search for a tutorial on object-oriented programming in JavaScript, you’ll find that each tutorial has its own way of doing things. It can be very confusing.

Fortunately, jQuery UI has a widget framework, that makes setting up object-oriented widgets easy. After using it, I wanted to use it for everything, until I find something at least as easy to use as it. I didn’t, however, want to include a large dependency like jQuery UI if I was only using it for its widget framework.

I was glad to find, after a little experimentation with the Build Your Download page, that I can get jQuery UI’s widget framework in a download of only 9.06 kb minified. You can get this by clicking Deselect All and checking UI Core. After that, the theme drop-down box should be set to No Theme.

I made a geocoding widget for Django in a project for a client using this. It simplified my code a great deal.

One thing it does that’s good for projects that might have a lot of custom widgets on one page (which was not the case for this one) is it takes care of using jQuery’s data() method, which stores objects in a way that is less likely to cause memory leak issues in Internet Explorer than storing objects using closures.

Here’s an example I whipped together to show some of what I learned from reading about the jQuery Event object. It shows that events can pass data as they bubble up.

1. gather.html – demo (my site)
2. gather.html – demo source (github)

jQuery has convenience functions for events like click and keydown, and lets you create and use your own events with bind() and trigger(), but doesn’t provide a way to create your own convenience functions for custom events. I took several lines of code from the jQuery source and created a plugin that makes creating convenience functions as easy as calling $.convenience(‘nameOfFunction’). Then I can bind or trigger an event simply by calling nameOfFunction() on the selector. This should be apparent by looking at the demo source (the third link).

1. jquery.convenience.js – plugin source (github)
2. convenience.html – demo (my site)
3. convenience.html – demo source (github)

The example shows one feature of custom events that I overlooked: propagation.