torsdag 13 juni 2013

jQuery context menu asynchronous/ajax submenu

Been looking all over the internet for a jQuery plugin that supports async/ajax sub menus. When I couldn't find one I started to look at the jQuery UI menu widget to see what that one could do.

Two important events are available:
refresh
focus

and those are the ones that are needed to achieve the asynchronous sub menu.

HTML:
<ul id="menu" style="width:300px">
<li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
<li>
<a href="#">Delphi</a>
<ul>
                 <li><a href="#"><img src="http://cdn-3.nikon-cdn.com/static/images/icons/icon_loading.gif"/></a></li>
</ul>
</li>
<li><a href="#">Saarland</a></li>
<li class="ui-state-disabled"><a href="#">Amesville</a></li>
</ul>

JS:
$(function(){
    $("#menu").menu({
        focus: function( event, ui ) {
            if(ui.item.children("ul").children("li").children("a").children("img").length > 0){
                $.get("http://fiddle.jshell.net", function(data){
                    ui.item.children("ul").html("<li><a href='#'>Viktor</a></li><li><a href='#'>Sweden</a></li><li><a href='#'>Luleå</a></li>")
                    $("#menu").menu("refresh")
                })
            }
        }
    });

});

JSFIDDLE:
http://jsfiddle.net/3r5FX/

This should give you a fairly good idea of how to make an async context menu.

Inga kommentarer:

Skicka en kommentar