ContextMenu——右键菜单轻松拥有

（转）ContextMenu——右键菜单轻松拥有



ContextMenu
译自：http://www.trendskitchens.co.nz/jquery/contextmenu/

简介
ContextMenu是一个轻量级jQuery插件，用于选择性地用自己创建的菜单代替浏览器的默认右键菜单。

特点
1.可以在一个页面中使用多个右键菜单；
2.一个右键菜单可以被绑定到多个元素上；
3.可以完全定制菜单的样式；
4.可以设置回调函数。
目前版本
版本号 r2
发布时间 16 July 2007
作者 Chris Domigan (cdomigan at gmail dot com)
下载 源js文件(4.3 KB)
压缩后的js文件(2.5 KB)
需要 jQuery v1.1 or greater
浏览器支持 Firefox 1.5+、Internet Explorer 6.0+

使用
$(elements).contextMenu(String menu_id [, Object settings]);你需要用HTML标记定义菜单结构。对每一个菜单，在一个div中放置一个无序列表（ul标记），设置这个div的class属性为”contextMenu”，并为其添加id属性。这个div可以被放置在任何地方，它将被插件自动隐藏掉。

你可以在页面中定义任意多的菜单。每一个li标记被作为菜单中的一个菜单项。给li标记添加一个唯一的id，这样便可以为其绑定动作。

注意：ContextMenu目前尚不支持嵌套菜单，这一特性也许会在下一个版本中添加。

参数
menu_id在div标记中定义的id属性值。你可以为一个或者多个标记绑定菜单。例如：$(“table td”).contextMenu(“myMenu”)将会给所有的td标记添加id是myMenu的菜单。

注意：相对于r1版本，r2版本中要求在id前添加一个”#”。

settings可选参数，用于改变菜单的样式和为菜单项绑定函数。ConTextMenu在settings对象中支持如下属性：

bindings一个对象，包含多个”id”:function对，用于给每一个菜单项关联单击的处理函数。触发当前菜单的标记会作为参数传给这个处理函数。

menuStyle一个对象，包含多个styleName:value对，用于给包含的ul标记设置css样式。

itemStyle一个对象，包含多个styleName:value对，用于给包含的li标记设置css样式。

itemHoverStyle一个对象，包含多个styleName:value对，用于给鼠标滑过处的li标记设置css样式。

shadow布尔类型，设置在菜单下是否显示阴影。默认是true。

eventPosX允许自定义哪一个单击事件用来决定显示菜单的横向位置。有时（尤其对于IE6）你需要将其设置成”clientX”。默认是”pageX”。

eventPosY允许自定义哪一个单击事件用来决定显示菜单的纵向位置。有时（尤其对于IE6）你需要将其设置成”clientY”。默认是”pageX”。

onContextMenu(event)在菜单显示前的回调函数。如果该函数返回false，菜单便不会显示。这允许你将上下文菜单（即右键菜单）放置于一个大的块级元素（甚至是整个文档）中，然后在右键单击时通过过滤以决定上下文菜单是否显示。

onShowMenu(event, menu)在菜单显示前的回调函数。它传入菜单元素的引用，允许在菜单显示前控制输出。它使我们可以在显示菜单前隐藏/显示菜单项或者其他操作。这个函数必须返回menu。

改变默认属性值
除了可以通过settings对象给每一个菜单传递样式信息，我们还可以通过调用$.contextMenu.defaults(settings)扩展所有菜单的default选项。除了bindings属性，其他的每一个都将其作为默认值。

比如：

$.contextMenu.defaults({

    menuStyle : {

      border : "2px solid green"

    },

    shadow: false,

    onContextMenu: function(e) {

      alert('有谁需要一个右键菜单?!');

    }

  });



举例
例1：bindings的基本使用
右键点击我 我也可以哦

• Open• Email• Save• Close
Html
    <div class="contextMenu" id="myMenu1">

      <ul>

        <li id="open"><img src="folder.png" /> Open</li>

        <li id="email"><img src="email.png" /> Email</li>

        <li id="save"><img src="disk.png" /> Save</li>

        <li id="close"><img src="cross.png" /> Close</li>

      </ul>

    </div>
Javascript
    $('span.demo1').contextMenu('myMenu1', {

      bindings: {

        'open': function(t) {

          alert('Trigger was '+t.id+'\nAction was Open');

        },

        'email': function(t) {

          alert('Trigger was '+t.id+'\nAction was Email');

        },

        'save': function(t) {

          alert('Trigger was '+t.id+'\nAction was Save');

        },

        'delete': function(t) {

          alert('Trigger was '+t.id+'\nAction was Delete');

        }

      }

    });
以上的代码为所有有demo1的class属性值的span标记绑定myMenu1右键菜单。

例2：基本的样式设置
在这个段落中的任意位置右击都可以触发上下文菜单

•Item 1•Item 2•Item 3•Item 4
Html
  <div class="contextMenu" id="myMenu2">

    <ul>

      <li id="item_1">Item 1</li>

      <li id="item_2">Item 2</li>

      <li id="item_3">Item 3</li>

      <li id="item_4">Item 4</li>

      <!-- etc... -->

    </ul>

  </div>
Javascript
    $('#demo2').contextMenu('myMenu2', {

      menuStyle: {

        border: '2px solid #000'

      },

      itemStyle: {

        fontFamily : 'verdana',

        backgroundColor : '#666',

        color: 'white',

        border: 'none',

        padding: '1px'

      },

      itemHoverStyle: {

        color: '#fff',

        backgroundColor: '#0f0',

        border: 'none'

      }

    });
以上的代码为所有id属性值为demo2的标记绑定myMenu2右键菜单。

例3：回调函数的高级应用
不显示菜单 就显示每一个菜单项 全部显示

•Item 1•Item 2•Item 3
Html
  <div class="contextMenu" id="myMenu3">

    <ul>

      <li id="item_1">Item 1</li>

      <li id="item_2">Item 2</li>

      <li id="item_3">Item 3</li>

    </ul>

  </div>
Javascript
    $('span.demo3').contextMenu('myMenu3', {

      onContextMenu: function(e) {

        if ($(e.target).attr('id') == 'dontShow') return false;

        else return true;

      },

      onShowMenu: function(e, menu) {

        if ($(e.target).attr('id') == 'showOne') {

          $('#item_2, #item_3', menu).remove();

        }

        return menu;

      }

    });