{% extends "lizard_ui/lizardbase.html" %}

{% block title %}Automatic tree setup in the sidebar{% endblock %}


{% block sidebar %}
<div class="sidebarbox">
  <h2>Tree view</h2>
  <ul class="automatic-tree filetree">
    <li>
      <span class="file">node 0</span>
    </li>
    <li>
      <span class="folder">node 1</span>
      <ul>
        <li><span class="file">node 11</span></li>
        <li><span class="file">node 12</span></li>
        <li><span class="file">node 13</span></li>
      </ul>
    </li>
    <li>
      <span class="folder">node 2</span>
      <ul>
        <li><span class="file">node 21</span></li>
        <li><span class="file">node 22</span></li>
        <li><span class="file">node 23</span></li>
      </ul>
    </li>
  </ul>
</div>
{% endblock %}

{% block content %}
<div id="textual">
  <h1>Automatic tree in the sidebar demo</h1>
  <p>
    We use the <a
    href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/">treeview</a>
    jquery plugin to show collapsible trees.
  </p>
  <p>There are some html/class requirements to get a nice filetree:</p>
  <ul>
    <li>
      Start with a UL with classes "filetree" (for css), "automatic-tree"
      (so that lizard-ui's js sets up the treeview js).  And perhaps "pane" if
      it is used in an accordion.
    </li>
    <li>
      Make sure the html is valid. So a UL contains only LI items.  A folder
      is an LI with an UL inside it.
    </li>
    <li>
      Use spans for the textual content.  CSS class "file" for endpoints,
      "folder" for folders.
    </li>
    <li>
      Use <b>view source</b> to see how it's done on this page.
    </li>
  </ul>
</div>
{% endblock %}
