Welcome Guest, Not a member yet? Register   Sign In
html helper for nested css based treeview
#1

[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.




Theme © iAndrew 2016 - Forum software by © MyBB