leiyt / checktree Goto Github PK

##Overview

CheckTree is a jQuery plugin, written for jQuery 1.7.0 and later, that allows you to easily turn a standard ordered list into a hierarchical tree that is both check-able and collapsable.

It, like jQuery, is licensed under either the GPL or MIT license.

Original project Copyright (C) 2012 JJ Geewax
This fork Copyright (C) 2013 Richard Fawcett

##Getting Started

In your HTML markup, define an unordered list using the following layout:

<ul class="tree">
  <li>
    <input type="checkbox">
    <label>Option 1</label>
    <ul>
      <li>
        <input type="checkbox" name="ourvar" value="1a">
        <label>Option 1A</label>
      </li>
      <li>
        <input type="checkbox" name="ourvar" value="1b">
        <label>Option 1B</label>
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" name="ourvar" value="2">
    <label>Option 2</label>
  </li>
</ul>

After ensuring you've included a reference to the jQuery script, add the following script to your page.

$(function(){
  $("ul.tree").checkTree();
});

The script will replace the HTML checkbox controls with a div with class checkbox. It will also add the classes checked or half_checked to this div, depending on whether all children, or some children, are checked.

A div with class arrow is prepended to each non-leaf-node checkbox. Such div elements are also adorned with either a collapsed or expanded class to indicate whether the node is collapsed or expanded. These can be used to assign different background images in CSS.

##Options

The checkTree() function optionally accepts an object variable containing options. The following keys are supported:

• onExpand - a function which is called when a node in the tree is expanded.
• onCollapse - a function which is called when a node in the tree is collapsed.
• onCheck - a function which is called when a checkbox is ticked.
• onUnCheck - a function which is called when a checkbox is unticked.
• onHalfCheck - a function which is called when a checkbox becomes half-checked.
• onLabelHoverOver - a function which is called when a label is hovered over.
• onLabelHoverOut - a function which is called when a label is no longer being hovered over.
• labelAction - either 'expand' or 'check' - determines what happens when a label is clicked.