jquery ui menu custom popup

Question

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.

Yes the jsfiddle sandbox misses some jquery ui images, but that's not the case in my local environment, and there it behaves the same way. So I guess that doesn't have any influence. — Attila Fulop, Apr 24 '12 at 16:53
I don't see the issue. You have a working demo so just copy all the js and css files. If your jsFiddle isn't working the same way you're probably not using the same code as the example. — j08691, Apr 24 '12 at 16:55
You're missing CSS/Images from the jQuery demo locally, so sort that out. The jQuery works fine which means it is definitely a styling issue; hence you're stylings are incomplete. Download the latest jQuery UI in full. — , Apr 24 '12 at 16:57
@JoshuaM: As said my local environment CONTAINS those images AND the button/menu behaves the same as in jsfiddle. The jsfiddle and the demo environment are not 100% the same, because jsfiddle contains the standard jquery+jquery-ui. So the question (still) is, how can I achieve the same result seen in the demo using a _standard_ jquery+jquery-ui library. — Attila Fulop, Apr 24 '12 at 17:04
@j08691: The demo doesn't use a standard jquery/jquery ui library, therefore I don't want to copy those js files. The question is how can I achive the same behavior with the latest/standard jquery ui library. — Attila Fulop, Apr 24 '12 at 17:09
@Marc: Yes, neither does it close, nor it does it open when clicking the button. Moreover, neither does the event for the click menu item fire. — Attila Fulop, Apr 24 '12 at 17:40

score 0 · Accepted Answer · answered Apr 24 '12 at 17:31

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

jquery ui menu custom popup

1 Answers1