[eluser]wiredesignz[/eluser]
Tree structure
Code:
/**
* List item array, builds tree view for css based nav
* array[0] = new branch of this css class
* others = list items <label>|<url>|<css class>
*/
$list_items = array
(
0 => 'tree',
1 => 'Item 1|#|open',
2 => array
(
0 => '',
1 => 'Item 1.1|#',
2 => 'Item 1.2|#|closed',
3 => array
(
0 => '',
1 => 'Item 1.2.1|#',
2 => 'Item 1.2.2|#',
3 => 'Item 1.2.3|#'
),
4 => 'Item 1.3|#',
),
3 => 'Item 2|#|open',
4 => array
(
0 => '',
1 => 'Item 2.1.1|#',
2 => 'Item 2.1.2|#',
3 => 'Item 2.1.3|#'
),
);
html helper function
Code:
function build_list($arr)
{
foreach ($arr as $key => $value)
{
if (is_array($value)) //recurse child
{
$out .= $this->build_list($value);
$out .= '</li>'."\n";
}
else
{
if ($key == 0) //begin new branch
{
$out = '<ul';
$out .= ($value) ? ' class="'.$value.'"' : ''; //branch css class
$out .= '>'."\n";
}
else //build list items
{
$attr = explode('|', $value);
$css = (isset($attr[2])) ? ' class="'.$attr[2].'"' : '' ; //item css class
$out .= '<li'.$css.'>';
$out .= (isset($attr[1])) ? anchor($attr[1],$attr[0]) : $attr[0];
$out .= (!isset($attr[2])) ? '</li>' : '';
$out .= "\n";
}
}
}
return $out.'</ul>'."\n";
}
Code:
echo build_list($list_items);
Output
Code:
<ul class="tree">
<li class="open"><a href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li class="closed"><a href="#">Item 1.2</a>
<ul>
<li><a href="#">Item 1.2.1</a></li>
<li><a href="#">Item 1.2.2</a></li>
<li><a href="#">Item 1.2.3</a></li>
</ul>
</li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li class="open"><a href="#">Item 2</a>
<ul>
<li><a href="#">Item 2.1.1</a></li>
<li><a href="#">Item 2.1.2</a></li>
<li><a href="#">Item 2.1.3</a></li>
</ul>
</li>
</ul>
Based on SilverStripe tree control
http://www.silverstripe.com/tree-control/, css and javascript is available for download.