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