Question

我有一个自定义上下文菜单脚本，用于多个dom元素。我需要在显示元素时附加上下文菜单，并在未聚焦时将其分离。我需要它包含在一个函数中，以便我可以传递一个对象，用于上下文菜单项的单击函数。我怎么写这个，这样我每次显示时都不需要重新创建DOM元素？这是我到目前为止所做的：

function showCardContext(card)
{
    cardContext = $('<ul>').css({'position': 'absolute', width: '150px', 'z-index': 5}).append(
        $('<li>').append($('<a href="#">').html('Flip Over')).click(function(){/* do something with card here */}),
        $('<li>').append(
            $('<a href="#">').html('Counters'),
            $('<ul>').append(
                $('<li>').append($('<a href="#">').html('Increment')).click(function(){/* do something with card here */}),
                $('<li>').append($('<a href="#">').html('Decrement')).click(function(){/* do something with card here */}),
                $('<li>').append($('<a href="#">').html('Clear')).click(function(){/* do something with card here */})
            )
        ),
        $('<li>').append($('<a href="#">').html('Make Note')).click(function(){/* do something with card here */}),
        $('<li>').append(
            $('<a href="#">').html('Send To'),
            $('<ul>').append(
                $('<li>').append($('<a href="#">').html('Hand')).click(function(){/* do something with card here */}),
                $('<li>').append(
                    $('<a href="#">').html('Deck'),
                    $('<ul>').append(
                        $('<li>').append($('<a href="#">').html('Shuffle In')).click(function(){/* do something with card here */}),
                        $('<li>').append($('<a href="#">').html('On Top')).click(function(){/* do something with card here */}),
                        $('<li>').append($('<a href="#">').html('On Bottom')).click(function(){/* do something with card here */}),
                    )
                ).click(function(){/* do something with card here */}),
                $('<li>').append($('<a href="#">').html('Discard')).click(function(){/* do something with card here */}),
                $('<li>').append(
                    $('<a href="#">').html('Land of Redemption'),
                    $('<ul>').append(
                        $('<li>').append($('<a href="#">').html('Yours')).click(function(){/* do something with card here */}),
                        $('<li>').append($('<a href="#">').html('Opponents')).click(function(){/* do something with card here */})
                    )
                ).click(function(){/* do something with card here */})
            )
        ),
        $('<li>').append($('<a href="#">').html('Remove From Play')).click(function(){/* do something with card here */}),
        $('<li>').append($('<a href="#">').html('Relenquish Control')).click(function(){/* do something with card here */})
    ).appendTo($('body')).menu().hide();

    $(card.view).bind('contextmenu', function(e){cardContext.css({'left':e.pageX,'top':e.pageY}).show();});

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);

        // Hide Deck Menu
        if ((!$clicked.hasClass('card') && !$clicked.parent().hasClass('card')) || e.
        {
            cardContext.hide();
        }

    });
}

Answer 1

我使用jQuery contextmenu插件对我自己的CMS进行了一些重大修改。也许它可能是一个好的开始：http://www.abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin

自定义jquery上下文菜单优化

1 个答案: