Menu tree

This example shows the use of the tree menu, unobtrusively, and entirely from javascript. The data in the two menus is the same, it is simply the way that the menu is initialised that is different.

Example 1: unobtrusive tree menu with search

Unobtrusive tree menu

demo_menu_tree1.htm

<fieldset><legend>Unobtrusive tree menu</legend>

    <button id='treeOpenAll' type='button'>Open All</button>

    <button id='treeCloseAll' type='button'>Close All</button>

    <input type="text" id="searchBox" value="garlic chicken melt" size="30">

    <button id='treeSearch' type='button'>Search</button>

    <button id='treeClear' type='button'>Clear</button>

    <br/>

    <ul id="pax.widget.menu.tree.example1">

        <li>Entree

            <ul>

                <li><a href="javascript:alert('Now with so much garlic it will make you cry!');">Garlic bread</a></li>

                <li><a href="javascript:alert('Its the bacon that makes it good!');">Mini Ceasar salad</a></li>

            </ul>

        </li>

        <li>Mains

            <ul>

                <li><a href="javascript:alert('Its extra roasted to hide the mutton-ness');">Roast Lamb</a></li>

                <li><a href="javascript:alert('We only use the cheapest herbs and spices!');">Grill Chicken</a></li>

                <li><a href="javascript:alert('How would you like it? Well done? Please say well done.');">Sirloin steak</a></li>

                <li><a>Specials of the day</a>

                    <ul>

                        <li><a href="javascript:alert('It is 40% flake sir, not sure what the rest is...');">Fish (ask waiter for details)</a></li>

                        <li><a href="javascript:alert('Now guaranteed to be genetically modified!');">Chicken (like the fish ;o)</a></li>

                        <li><a>Not so specials of the day</a>

                            <ul>

                                <li><a href="javascript:alert('Watch out for the crunchiness...');">Yesterdays Tuna melt</a></li>

                                <li><a href="javascript:alert('The brie is a bit runny...');">Yesterdays Tuna brie</a></li>

                                <li><a href="javascript:alert('Gorganzola? I think its from Hungary');">Yesterdays Tuna gorganzola</a></li>

                                <li><a href="javascript:alert('Its so Goorda youd want to eat it all!');">Yesterdays Tuna chunky gorda</a></li>

                            </ul>

                        </li>

                    </ul>

                </li>

            </ul>

        </li>

        <li>Specials of the day

            <ul>

                <li><a href="javascript:alert('Watch out for the crunchiness...');">Tuna melt</a></li>

                <li><a href="javascript:alert('The brie is a bit runny...');">Tuna brie</a></li>

                <li><a href="javascript:alert('Gorganzola? I think its from Hungary');">Tuna gorganzola</a></li>

                <li><a href="javascript:alert('Its so Goorda youd want to eat it all!');">Tuna chunky gorda</a></li>

            </ul>

        </li>

    </ul>

</fieldset>

demo_menu_tree1.js

/*  PAX Menu tree demo

    The below javascript will render the tree menu, and setup a set of buttons that interact with the tree, such as searching, and opening / collapsing nodes.

*/

pax.load.onloaded( function() {

    //  Initialise the menu

    var menu = pax.$("pax.widget.menu.tree.example1");

    pax.widget.menu.tree.init( menu );

    //  Setup the button actions

    pax.event.bind( pax.$('treeOpenAll'), 'click', function() { pax.widget.menu.tree.openAll( menu ); } );

    pax.event.bind( pax.$('treeCloseAll'), 'click', function() { pax.widget.menu.tree.closeAll( menu ); } );

    pax.event.bind( pax.$('treeSearch'), 'click', function() { pax.widget.menu.tree.search( menu, pax.$('searchBox').value ); } );

    pax.event.bind( pax.$('treeClear'), 'click', function() { pax.widget.menu.tree.clearSearch( menu ); } );

} );

Example 2: javascript generated tree menu

Javascript rendered tree menu

demo_menu_tree2.htm

<fieldset><legend>Javascript rendered tree menu</legend>

    <div id='pax.widget.menu.tree.example2'></div>

</fieldset>

demo_menu_tree2.js

/*  PAX Menu tree demo

    The below javascript will render the tree menu, and setup a button that toggles the orientation

*/

pax.load.onloaded( function() {

    //  JSON structure

    var model = {

        'Entre': {

            '0': '<a href="javascript:alert(\'Now with so much garlic it will make you cry!\');">Garlic bread</a>',

            '1': '<a href="javascript:alert(\'Its the bacon that makes it good!\');">Mini Ceasar salad</a>'

        },

        'Mains': {

            '0': '<a href="javascript:alert(\'Its extra roasted to hide the mutton-ness\');">Roast Lamb</a>',

            '1': '<a href="javascript:alert(\'We only use the cheapest herbs and spices!\');">Grill Chicken</a>',

            '2': '<a href="javascript:alert(\'How would you like it? Well done? Please say well done.\');">Sirloin steak</a>',

            'Main specials of the day': {

                '0': '<a href="javascript:alert(\'It is 40% flake sir, not sure what the rest is...\');">Fish (ask waiter for details)</a>',

                '1': '<a href="javascript:alert(\'Now guaranteed to be genetically modified!\');">Chicken (like the fish ;o)</a>',

                'Not so specials': {

                    '0': '<a href="javascript:alert(\'Watch out for the crunchiness...\');">Yesterdays Tuna melt</a>',

                    '1': '<a href="javascript:alert(\'The brie is a bit runny...\');">Yesterdays Tuna brie</a>',

                    '2': '<a href="javascript:alert(\'Gorganzola? I think its from Hungary\');">Yesterdays Tuna gorganzola</a>',

                    '3': '<a href="javascript:alert(\'Its so Goorda youd want to eat it all!\');">Yesterdays Tuna chunky gorda</a>'

                }

            }

        },

        'Specials of the day': {

            '0': '<a href="javascript:alert(\'Watch out for the crunchiness...\');">Tuna melt</a>',

            '1': '<a href="javascript:alert(\'The brie is a bit runny...\');">Tuna brie</a>',

            '2': '<a href="javascript:alert(\'Gorganzola? I think its from Hungary\');">Tuna gorganzola</a>',

            '3': '<a href="javascript:alert(\'Its so Goorda youd want to eat it all!\');">Tuna chunky gorda</a>'

        }

    };

    //  Initialise the menu

    pax.widget.menu.tree.init( pax.$("pax.widget.menu.tree.example2"), { model: model } );

} );