我找到了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 创建相同的本地弹出窗口。
请不要推荐第三方插件。