pax.widget.menu

This is a menu widget, that can render in various ways

Author

Mikkel Bergmann, http://www.pointful.com

Note

This widget is not ready for use in production yet.

Summary

pax.widget.menu	This is a menu widget, that can render in various ways
Functions
pax.widget.menu.dropdown.init	Creates a menu from an unordered list
pax.widget.menu.tree.init	Creates a menu tree from an unordered list

Functions

pax.widget.menu.dropdown.init

pax.widget.menu.dropdown.init = function( target,
args )

Creates a menu from an unordered list

Parameters

target	The UL to make into a menu
args	optional argument object to pass to the menu function, ie: {}

type - what type of menu to create, defaults to ‘dropdown’
vertical - boolean to set orientation of menu, defaults to false, ie: horizontal. This option is only valid for ‘dropdown’ menu type

Example

<fieldset><legend>dropdown menu</legend>
    <ul id="pax.widget.menu.dropdown.example1">
        <li>Entree
            <ul>
                <li><a>Garlic bread</a></li>
                <li><a>Mini Ceasar salad</a></li>
            </ul>
        </li>
        <li>Mains
            <ul>
                <li><a>Roast Lamb</a></li>
                <li><a>Grill Chicken</a></li>
                <li><a>Sirloin steak</a></li>
                <li>Specials of the day
                    <ul>
                        <li><a>Fish (ask waiter for details)</a></li>
                        <li><a>Chicken (like the fish ;o)</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</fieldset>

[:.
    pax.widget.menu.dropdown.init( pax.$("pax.widget.menu.dropdown.example1") );
:]

This will show a simple example of a dropdown menu

Example

<ul id="pax.widget.menu.example2">
    <li>Entree
        <ul>
            <li><a href="#">Garlic bread</a></li>
            <li><a href="#">Oysters kilpatrick</a></li>
            <li><a href="#">Mini Ceasar salad</a></li>
        </ul>
    </li>
    <li>Mains
        <ul>
            <li><a href="#">Roast Lamb</a></li>
            <li><a href="#">Grill Chicken</a></li>
            <li><a href="#">Sirloin steak</a></li>
        </ul>
    </li>
    <li>Dessert
        <ul>
            <li><a href="#">Chocolate mousse</a></li>
            <li><a href="#">Creme brulee</a></li>
            <li>Coffee & tea
                <ul>
                    <li><a href="#">Long black</a></li>
                    <li><a href="#">Capuccino</a></li>
                    <li><a href="#">Latte</a></li>
                    <li>Liquor coffes
                        <ul>
                            <li><a href="#">Kaluah</a></li>
                            <li><a href="#">Tia Maria</a></li>
                            <li><a href="#">Frangelico</a></li>
                            <li><a href="#">Butter Scotch</a></li>
                        </ul>
                    </li>
                    <li><a href="#">English breakfast tea</a></li>
                    <li><a href="#">Japanese green tea</a></li>
                    <li><a href="#">camomile tea</a></li>
                </ul>
            </li>
            <li><a href="#">Surprise of the day</a></li>
        </ul>
    </li>
</ul>

[:.
    pax.widget.menu.dropdown.init( pax.$('pax.widget.menu.example2') );
:]

This renders the UL as a drop down menu

pax.widget.menu.tree.init

pax.widget.menu.tree.init = function( target,
args )

Creates a menu tree from an unordered list

Parameters

target	The UL to make into a menu
args	optional argument object to pass to the menu function, ie: {}

type - what type of menu to create, defaults to ‘dropdown’

Example

<fieldset><legend>Tree menu</legend>
    <ul id="pax.widget.menu.tree.example1">
        <li>Entree
            <ul>
                <li><a>Garlic bread</a></li>
                <li><a>Mini Ceasar salad</a></li>
            </ul>
        </li>
        <li>Mains
            <ul>
                <li><a>Roast Lamb</a></li>
                <li><a>Grill Chicken</a></li>
                <li><a>Sirloin steak</a></li>
                <li>Specials of the day
                    <ul>
                        <li><a>Fish (ask waiter for details)</a></li>
                        <li><a>Chicken (like the fish ;o)</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</fieldset>

[:.
    pax.widget.menu.tree.init( pax.$("pax.widget.menu.tree.example1") );
:]

This will show a simple example of a tree menu

Example

<button onclick="pax.widget.menu.tree.openAll(pax.$('pax.widget.menu.tree.example2'))">Open All</button>
<button onclick="pax.widget.menu.tree.closeAll(pax.$('pax.widget.menu.tree.example2'));">Close All</button>
<input type="text" id="searchBox" value="patrick roast brulee long scotch green" size="30">
<button onclick="pax.widget.menu.tree.search(pax.$('pax.widget.menu.tree.example2'), pax.$('searchBox').value)">Search</button>
<button onclick="pax.widget.menu.tree.clearSearch( pax.$('pax.widget.menu.tree.example2') );">Clear</button>
<fieldset><legend>Tree menu</legend>
    <ul id="pax.widget.menu.tree.example2">
        <li>Entree
            <ul>
                <li><a>Garlic bread</a></li>
                <li><a>Oysters kilpatrick</a></li>
                <li><a>Mini Ceasar salad</a></li>
            </ul>
        </li>
        <li>Mains
            <ul>
                <li><a>Roast Lamb</a></li>
                <li><a>Grill Chicken</a></li>
                <li><a>Sirloin steak</a></li>
            </ul>
        </li>
        <li>Dessert
            <ul>
                <li><a>Chocolate mousse</a></li>
                <li><a>Creme brulee</a></li>
                <li>Coffee & tea
                    <ul>
                        <li><a>Long black</a></li>
                        <li><a>Capuccino</a></li>
                        <li><a>Latte</a></li>
                        <li>Liquor coffes
                            <ul>
                                <li><a>Kaluah</a></li>
                                <li><a>Tia Maria</a></li>
                                <li><a>Frangelico</a></li>
                                <li><a>Butter Scotch</a></li>
                            </ul>
                        </li>
                        <li><a>English breakfast tea</a></li>
                        <li><a>Japanese green tea</a></li>
                        <li><a>camomile tea</a></li>
                    </ul>
                </li>
                <li><a>Surprise of the day</a></li>
            </ul>
        </li>
    </ul>
</fieldset>

[:.
    pax.widget.menu.tree.init( pax.$("pax.widget.menu.tree.example2") );
:]

This will show an extensive example, with all features enabled