CheckTree v 0.2

Demonstration

Here is a quick demo of the code which renders an unordered list and gives an example of how to format your hierarchy to be rendered appropriately by CheckTree.

• United States
  • Pennsylvania
• Canadia
  • Province In Canadia
• Afghanistan
• Sealand
  • Tree City
  • Oil Province
    • Oil City
  • Fun Province
    • Fun City
    • Not Fun City

About CheckTree

This is my first attempt at a jQuery plugin, and builds on a checkbox tree plugin written by Matt Wood. Matt's implementation can be found at his website.

This plugin basically allows to you nicely display a checkable, collapseable hierarchy without doing all the work to get it formatted. The checkbox inputs are actually hidden with images used in their place. Additionally, sub-lists (nested ul's) are actually nested and hidden by default.

The rendered result is similar to that by the standard YUI tree, however I find jQuery much easier to understand and wanted to write similar functionality. In the future I may look into making the lines along the sides look more like YUI.

In case anyone is wondering, CheckTree was written by me, JJ Geewax, when I discovered jQuery and wanted to write a plugin and thought that this was a tricky problem that wasn't too tricky.

The first post of this code was done on 6 September 2008, around 4:30 AM

Main Improvements

The improvements have really been in:

• More understandable, maintainable code
• Half-Checked check boxes to show when some children are checked
• Checking/Unchecking all children updates the parent

Get the Code

Right now I'm just hosting the most recent version of the code on this server, which you can download here: CheckTree v 0.2 (latest).

In the future I'd consider creating a Google Code project if there is a reasonable amount of use for the plugin.

Updates

6 Septembder 2008, around 2 PM

At the request of a friend, I added callbacks to the main events:

• onCheck
• onUnCheck
• onHalfCheck
• onCollapse
• onExpand

All of the callbacks should accept as the single argument the jQuery wrapped LI element of the item firing the event. They are fired only when the state changes, ie if a checkbox is already half-checked, and children change such that it remains half-checked, the onHalfCheck event is not fired again.

and again around 6:30 PM

I've refactored things slightly adding a few new features:

• I added onLabelHoverOver and onLabelHoverOut callback support so you can have callbacks on those events. Additionally, the hover still adds the css class "hover" to labels that you are hovered over.
• Added the setting argument 'labelAction' which can make the label act as the arrow does (to expand the items), or as the checkbox does (to toggle the checked state of the item and its children).
• The arrow image is a div with class "arrow" that gets an extra class either "collapsed" or "expanded" depending on it's state. If it is blank (has no children) it gets neither. So styling the arrow is now an issue of CSS rather than passing an image location as it used to be.
• The checkbox is a div with class "checkbox" rather than setting the background of the label. This also makes styling the checkbox a CSS issue. It gets additionally classes "checked" or "half_checked" and has solely the class "checkbox" for an unchecked checkbox. The example css (checktree.css) shows how to use this.
• A friend of mine discovered a bug in Safari where the checkboxes are not hidden correctly.
  I have an idea of how to fix this, which involves converting the type from 'checkbox' to 'hidden', but don't have safari to test it, so I don't want to dive in too far just yet. I will get to this soon.

Bugs? Comments? Feedback? Issues?

You can contact me at jj[*at*]geewax.org, or visit my blog at http://blog.geewax.org/ to leave feedback comments, request changes, or notify me of any bugs.