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.menuThis is a menu widget, that can render in various ways
Functions
pax.widget.menu.dropdown.initCreates a menu from an unordered list
pax.widget.menu.tree.initCreates 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

targetThe UL to make into a menu
argsoptional argument object to pass to the menu function, ie: {}
  • type - what type of menu to create, defaults to ‘dropdown’
  • isVertical - 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.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.widget.menu.example2') );
:]

This renders the UL as a drop down menu

pax.widget.menu.tree.init

pax.widget.menu.tree.init = function(element)

Creates a menu tree from an unordered list

Parameters

targetThe UL to make into a menu
argsoptional argument object to pass to the menu function, ie: {}
  • type - what type of menu to create, defaults to ‘dropdown’
  • isVertical - boolean to set orientation of menu, defaults to false, ie: horizontal.  This option is only valid for ‘dropdown’ menu type

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.widget.menu.tree.example1") );
:]

This will show a simple example of a tree menu

Example

<button onclick="pax.widget.menu.tree.openAll($('pax.widget.menu.tree.example2'))">Open All</button>
<button onclick="pax.widget.menu.tree.closeAll($('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.widget.menu.tree.example2'), $('searchBox').value)">Search</button>
<button onclick="pax.widget.menu.tree.clearSearch( $('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.widget.menu.tree.example2") );
:]

This will show an extensive example, with all features enabled

pax.widget.menu.dropdown.init = function(target,
args)
Creates a menu from an unordered list
pax.widget.menu.tree.init = function(element)
Creates a menu tree from an unordered list
Close