1

我正在使用我在这里找到的一些功能：http ://www.trendskitchens.co.nz/jquery/contextmenu/

它让我开始制作一个不错的上下文菜单。我的目的是让这个上下文菜单在右键或左键单击时“弹出”。但我可能并不总是想绑定左键单击，所以我需要能够始终进行右键单击，并且当我想要时，使用一些代码也可以使左键单击工作。

首先，为了测试你需要 jQuery 来进行演示，我使用的是 1.8.2

这是插件的来源：

/*
 * ContextMenu - jQuery plugin for right-click context menus
 *
 * Author: Chris Domigan
 * Contributors: Dan G. Switzer, II
 * Parts of this plugin are inspired by Joern Zaefferer's Tooltip plugin
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Version: r2
 * Date: 16 July 2007
 *
 * For documentation visit http://www.trendskitchens.co.nz/jquery/contextmenu/
 *
 */

(function($) {

    var menu, shadow, trigger, content, hash, currentTarget;
  var defaults = {
    menuStyle: {
      listStyle: 'none',
      padding: '1px',
      margin: '0px',
      backgroundColor: '#fff',
      border: '1px solid #999',
      width: '100px'
    },
    itemStyle: {
      margin: '0px',
      color: '#000',
      display: 'block',
      cursor: 'default',
      padding: '3px',
      border: '1px solid #fff',
      backgroundColor: 'transparent'
    },
    itemHoverStyle: {
      border: '1px solid #0a246a',
      backgroundColor: '#b6bdd2'
    },
    eventPosX: 'pageX',
    eventPosY: 'pageY',
    shadow : true,
    onContextMenu: null,
    onShowMenu: null
    };

  $.fn.contextMenu = function(id, options) {
    if (!menu) {                                      // Create singleton menu
      menu = $('<div id="jqContextMenu"></div>')
               .hide()
               .css({position:'absolute', zIndex:'500'})
               .appendTo('body')
               .bind('click', function(e) {
                 e.stopPropagation();
               });
    }
    if (!shadow) {
      shadow = $('<div></div>')
                 .css({backgroundColor:'#000',position:'absolute',opacity:0.2,zIndex:499})
                 .appendTo('body')
                 .hide();
    }
    hash = hash || [];
    hash.push({
      id : id,
      menuStyle: $.extend({}, defaults.menuStyle, options.menuStyle || {}),
      itemStyle: $.extend({}, defaults.itemStyle, options.itemStyle || {}),
      itemHoverStyle: $.extend({}, defaults.itemHoverStyle, options.itemHoverStyle || {}),
      bindings: options.bindings || {},
      shadow: options.shadow || options.shadow === false ? options.shadow : defaults.shadow,
      onContextMenu: options.onContextMenu || defaults.onContextMenu,
      onShowMenu: options.onShowMenu || defaults.onShowMenu,
      eventPosX: options.eventPosX || defaults.eventPosX,
      eventPosY: options.eventPosY || defaults.eventPosY
    });

    var index = hash.length - 1;
    $(this).bind('contextmenu', function(e) {
      // Check if onContextMenu() defined
      var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
      if (bShowContext) display(index, this, e, options);
      return false;
    });
    return this;
  };

  function display(index, trigger, e, options) {
    var cur = hash[index];
    content = $('#'+cur.id).find('ul:first').clone(true);
    content.css(cur.menuStyle).find('li').css(cur.itemStyle).hover(
      function() {
        $(this).css(cur.itemHoverStyle);
      },
      function(){
        $(this).css(cur.itemStyle);
      }
    ).find('img').css({verticalAlign:'middle',paddingRight:'2px'});

    // Send the content to the menu
    menu.html(content);

    // if there's an onShowMenu, run it now -- must run after content has been added
        // if you try to alter the content variable before the menu.html(), IE6 has issues
        // updating the content
    if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);

    $.each(cur.bindings, function(id, func) {
      $('#'+id, menu).bind('click', function(e) {
        hide();
        func(trigger, currentTarget);
      });
    });

    menu.css({'left':e[cur.eventPosX],'top':e[cur.eventPosY]}).show();
    if (cur.shadow) shadow.css({width:menu.width(),height:menu.height(),left:e.pageX+2,top:e.pageY+2}).show();
    $(document).one('click', hide);
  }

  function hide() {
    menu.hide();
    shadow.hide();
  }

  // Apply defaults
  $.contextMenu = {
    defaults : function(userDefaults) {
      $.each(userDefaults, function(i, val) {
        if (typeof val == 'object' && defaults[i]) {
          $.extend(defaults[i], val);
        }
        else defaults[i] = val;
      });
    }
  };

})(jQuery);

$(function() {
  $('div.contextMenu').hide();
});

我的页面的来源：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Workflow.dwt.php" codeOutsideHTMLIsLocked="false" -->
    <head>
        <script type="text/javascript" src="../jQuery/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="../../Common/clientscript.js"></script>
        <script type="text/javascript" src="jquery.actions.js"></script>
        <script>
            $(document).ready(function() {
                /// Replace the intrinsic Context Menu with MINE
                $('span.infoholder').contextMenu('myMenu',{
                    onContextMenu: function(e)
                    {
                        iDataID = $(e.target).attr('id').replace("menu_","");
                        iGroupID = $(e.target).attr('name');


                    }
                });

                /// Get the Left Click to behave as the right click...
                $("span.infoholder").click(function(event) {
                    alert("I am in " + event.which);
                    // on right click
                    if (event.which == "1")
                    {
                        // prevent left click from being interpreted by the browser:
                        $("#"+$(event.target).attr("id")).trigger({
                            type: 'click',
                            which: 3
                        });
                    }
                });
            });
        </script>
    </head>
    <body>
    <div class="contextMenu" id="myMenu">
        <li>Test 1</li>
        <li>Test 2</li>
    </div>
    <span class="infoholder" id="menu_34675"     name="1"     style="border:solid 1px grey; padding: 2px 5px 2px 5px; background-color:#d9f7ff;">Actions </span><br/><br/>
    <span class="infoholder" id="menu_34735"     name="1"     style="border:solid 1px grey; padding: 2px 5px 2px 5px; background-color:#d9f7ff;">Actions </span><br/><br/>
    </body>
</html>

这有一点遗漏，但这里的源代码为我们提供了一个很好的示例来开始解决这个问题。这又是“如何通过左键单击来调用此插件的自定义上下文菜单”

4

2 回答 2

1

这是答案，将其绑定到插件Javascript中的点击 

$(this).bind('click', function(e) {
    // Check if onContextMenu() defined
    var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
    if (bShowContext) display(index, this, e, options);
    return false;
});
于 2013-02-25T15:37:09.167 回答
0

只需将 'contextmenu 添加到绑定到的项目中：

$(this).bind('click contextmenu', function(e) {
   // Check if onContextMenu() defined
   var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
   if (bShowContext) display(index, this, e, options);
   return false;
});
return this;
于 2017-02-20T17:56:28.077 回答