0

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 で作成する方法を教えてください。

サードパーティのプラグインはお勧めしません。

4

1 に答える 1

0

デモは 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からダウンロードできます

于 2012-04-24T17:31:14.900 に答える