Description
In the tx-content a <div> with class
tx-tree is created.
In the
li elements of the
tx-tree-view are the
span.tx-info, which referes to the
table th.
tx-tree-view contains the tree view. for a better description, how the tree view is defined, refer the source code (context highlighting in the browser)
The current example has no ids or names defined, if necessary they have to be defined contextually.
div.tx-tree is the main container for the tree view. If no class is defined on the
div.tx-tree element the tree has 100% width.
The classes
.tx-show-panel,
.tx-hide-panel and
.tx-halfwidth-left define the position of the tree view.
.tx-show-panel: position with a panel on the left side.
.tx-hide-panel: position with a panel on the left side, hidden.
.tx-halfwidth-left: position on the left side 50% width.
Example code
<!-- contains the tree -->
<div class="tx-tree-view">
<table class="tx-table">
<tr>
<th></th>
<th>Concepts</th>
<th class="col1">Tagged pages</th>
<th class="col2">In concepts</th>
</tr>
</table>
<!-- example folder structure -->
<ol>
<!-- tx-open, shows the arrow down on a "open" element -->
<li class="tx-open">
<!-- li content is wrapped inside a div to avoid some javascript event problems, eg. drag drop events can be assigned to the div instead -->
<div>
<!-- span class tx-info should be correspond with the table th widths -->
<span class="tx-info"><span class="col1">9</span><span class="col2">3</span></span>
<!-- drag icon -->
<div title=" Themes..." class="tx-icon tx-icon-drag">drag me</div>
<!-- checkbox -->
<input type="checkbox" /><!-- name --><a href=""></a><a href="">Themes...</a>
</div>
<!-- subelements of an li -->
<ol>
<li class="tx-open"><div>
<span class="tx-info"><span class="col1">29</span><span class="col2">2</span></span>
<div title=" Where" class="tx-icon tx-icon-drag">drag me</div>
<input type="checkbox" /><a href=""></a><a href=""> Where</a>
</div>
<ol>
<!-- li default shows an right arrow as background -->
<li><div>
<span class="tx-info"><span class="col1">51</span><span class="col2">5</span></span>
<div title="Africa" class="tx-icon tx-icon-drag">drag me</div>
<input type="checkbox" /><a href=""></a><a href="">Africa</a>
</div></li>
<!-- tx-nobg, shows no arrow on a element, e.g. element has no subelements -->
<li class="tx-nobg"><div>
<span class="tx-info"><span class="col1">70</span><span class="col2">2</span></span>
<div title="Ecoregions" class="tx-icon tx-icon-drag">drag me</div>
<input type="checkbox" /><a href=""></a><a href="">Ecoregions</a>
</div></li>
</ol>
</li>
</ol>
</li>
</ol>
<!-- // example folder structure-->
</div>
<!-- // tree view -->