jquery.spacetree: an example of Progressive Enhancement

I have recently developed a Jquery plugin: Jquery.spacetree. It uses the Javascript Infovis Toolkit to display a spacetree based on an html subtree.

Let me show an example. This is a nested list:

<div id="tree">
  <div id="root">Root content</div>
  <ul>
    <li>
      <div id="child1">first child</div>
      <ul>
        <li>
          <div id="subchild1">subchild element 1</div>
        </li>
        <li>
          <div id="subchild2">subchild element 2</div>
        </li>
      </ul>
    </li>
    <li>
      <div id="child2" class="selected">child element 2</div>
    </li>
    <li>
      <div id="child3">child element 3</div>
    </li>
    <li>
      <div id="child4">child element 4</div>
    </li>
  </ul>
</div>
 

It's a perfectly valid html. This is the result:

Root content

• first child
  • subchild element 1
  • subchild element 2
• child element 2
• child element 3
• child element 4

The plugin is called in the usual "ready" event:

$(document).ready(function (){
    $('#tree').spacetree('#spacetree');
});

Et voilà:

So, what's the point ? The point is that, even without Javascript, the semantic of the list is well defined. The spacetree plugin, in this case, adds only a better visualization.