Пользовательское меню JQuery UI всплывающее окно

Question

Я нашел виджет http://docs.jquery.com/UI/Menu.

Я хотел бы добиться того же поведения, что и в этой демонстрации: http://view.jqueryui.com/menubar/demos/menu/contextmenu.html

Но если я добавлю этот код на мою страницу:

<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});
    });​

Я получаю этот результат: http://jsfiddle.net/Q7CTz/

Я видел, что в демо-версии используется несколько иной интерфейс jquery, но я не мог понять точную разницу. Не могли бы вы помочь мне, как создать такое же локальное всплывающее окно с чистым интерфейсом jquery, как показано на демо.

Пожалуйста, не рекомендуйте сторонние плагины.

Answer 1

Демонстрация была создана с помощью jquery ui 1.9, которая (на момент написания этой статьи) еще не была опубликована публично. http://blog.jqueryui.com/2010/06/jquery-ui-19m2-menu/

Таким образом, поведение в демоверсии не может быть достигнуто с помощью jquery-ui 1.8 series. Последняя версия для разработки на данный момент 1.9m7; можно загрузить с https://github.com/jquery/jquery-ui/tree/1.9m7/ui