Zend_Navigation Tricks: True tab navigation with sub menus – Part 3

Posted: 16th August 2009 by Grant Perry in Zend Framework
Tags:
2

Part 3: Implementing jsTree which uses jQuery (optional javascript expand/collapse)

This is a completely optional step in this series and really has nothing to do with Zend Framework because by this based on the client side we have all the HTML we need.

What we’ll be doing is setting up jsTree a jQuery tree component that can do much more than we’ll be using it for, it’s probably overkill but the best I came across when I was looking on this occasion.

You need jQuery:

$this->headScript()->appendFile($this->baseUrl . '/scripts/jquery-1.3.2.min.js', 'text/javascript');

Setup the jsTree javascript and css files if $nav2Container is set (see Part 2)

// append nav2 menu components if $activeContainer is set for the menu
if(isset($nav2Container)) {
    $this->headScript()->appendFile($this->baseUrl . '/scripts/jstree/css.js', 'text/javascript');
    $this->headScript()->appendFile($this->baseUrl . '/scripts/jstree/tree_component.min.js', 'text/javascript');
    $this->headLink()->appendStylesheet($this->baseUrl . '/scripts/jstree/tree_component.css', 'screen');
}

Render the Style and Script files we setup earlier:

        echo $this->headStyle() . "\n";
        echo $this->headScript() . "\n";

Some of this code below is a repeat from previous parts but its better to see this all in context. I’ve added a couple bit of JavaScript to achieve the following:

< ?php
        	// render nav2 container and menu if not on the homepage
        	if(isset($nav2Container)) {
        ?>
        <div id="nav2Container">
        	< ?php 
        		$this->navigation()->menu()->setMinDepth(null)->setMaxDepth(null);
        		echo $this->navigation()->menu()->renderMenu($nav2Container,array('ulClass' => 'nav2'));
        	?>
        	<script type="text/javascript">
        	$(function () {
        			// setup each active <li> with an id
        			var $active_li = $(".nav2 li.active");
        			var $active_li_id = new Array();
            		for( var i = 0, n = $active_li.length;  i < n;  ++i ) {
                		var $element = $active_li[i];
                		$active_li_id[i] = "nav2_active_" + i;
                		$($element).attr("id", $active_li_id[i]);
            		};
        			// configure and initialise 
        			$(".nav2").tree({
              			data  : {type : "predefined"},
            	  		opened : $active_li_id,
        	      		path : "<?php echo $this->baseUrl . '/scripts/jstree/'; ?>",
              			ui : {theme_name : "toolbox"},
        	      		rules : {   
                			metadata : "mdata",
                			use_inline : true
              			}
        			});
        		});
        	</li></script>
        </div>
        < ?php
        	}
        ?>

I’m using version 0.9.8 of jsTree but I’m looking forward to version 0.9.9 which will apparently alleviate some of my design/performance concerns, as the script loads this default theme and then the custom theme, rather than just the custom theme.

If I’ve missed anything and this doesn’t work, please let me know!

Share|

  1. Zend_Navigation Tricks: True tab navigation with sub menus – Part 1 | Child of the Machine says:
    16 August 2009 at 4:44 pm

    [...] Part 3: Implementing jsTree which uses jQuery (optional javascript expand/collapse) [...]

  2. Grant Perry says:
    29 August 2010 at 10:37 pm

    Please note there is a much newer and MUCH BETTER version of jsTree available now. If you’re looking for the updated javascript in this post to call it just contact me!