0
我找到了http://docs.jquery.com/UI/Menu小部件。jquery ui菜單自定義彈出式菜單
我想達到完全相同的行爲，在這個演示看到： 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相同的本地彈出窗口。
請不要推薦第三方插件。
看起來像你錯過了我的一些樣式。 – 2012-04-24 16:51:22
是的，jsfiddle沙箱會遺漏一些jquery ui圖像，但在我的本地環境中並不是這樣，在那裏它的行爲方式也是一樣的。所以我想這沒有任何影響。 – 2012-04-24 16:53:29
我看不到問題。你有一個工作演示，所以只需複製所有的js和css文件。如果你的jsFiddle工作方式不同，你可能沒有使用與示例相同的代碼。 – j08691 2012-04-24 16:55:31