Search code examples
javascriptjqueryjquery-uijquery-ui-menu

jquery ui menu custom popup

I've found the http://docs.jquery.com/UI/Menu widget.

I'd like to achieve exactly the same behavior as seen in this demo: http://view.jqueryui.com/menubar/demos/menu/contextmenu.html

But if I add this code on my page:

<div class="demo">

<button>Select a city</button>
<ul id="cities">
    <li><a href="#Amsterdam">Amsterdam</a></li>
    <li><a href="#Anaheim">Anaheim</a></li>
    <li><a href="#Cologne">Cologne</a></li>
    <li><a href="#Frankfurt">Frankfurt</a></li>
    <li><a href="#Magdeburg">Magdeburg</a></li>
    <li><a href="#Munich">Munich</a></li>
    <li><a href="#Utrecht">Utrecht</a></li>
    <li><a href="#Zurich">Zurich</a></li>
</ul>

<div id="log"></div>


$(function() {
        var btn = $(".demo button").button({
            icons: {
                primary: "ui-icon-home",
                secondary: "ui-icon-triangle-1-s"
            }
        });
        $("#cities").menu({
            select: function(event, ui) {
                $("#log").append("<div>Selected " + ui.item.text() + "</div>");
            },
            trigger : btn});
    });​

I get this result: http://jsfiddle.net/Q7CTz/

I saw that the demo is using somewhat different jquery ui, but I couldn't figure out the exact difference. Could you please help me how to create the same local popup with pure jquery ui as seen on the demo.

Please don't recommend 3rd party plugins.

Solution

  • The demo was created with jquery ui 1.9, that (at the moment of writing this) is not yet released publicly. http://blog.jqueryui.com/2010/06/jquery-ui-19m2-menu/

    So the behavior in the demo can't be achieved using the jquery-ui 1.8 series. The latest development version at the moment is 1.9m7; can be downloaded from https://github.com/jquery/jquery-ui/tree/1.9m7/ui