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 ui创建相同的本地弹出窗口。

请不要推荐第三方插件。

Answer 1

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

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

下载

jquery ui菜单自定义弹出窗口

1 个答案: