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 ui，但我找不到确切的区别。您可以帮助我如何创建相同的本地弹出窗口与纯jquery用户界面上看到的演示。

请不要推荐第三方插件。

Answer 1

该演示是使用jquery ui 1.9创建的，(在撰写本文时)尚未公开发布。http://blog.jqueryui.com/2010/06/jquery-ui-19m2-menu/

因此，使用jquery-UI1.8系列无法实现演示中的行为。目前最新的开发版本是1.9m7；可以从https://github.com/jquery/jquery-ui/tree/1.9m7/ui下载