右键菜单插件ContextMenu（如何调用jQuery插件学习第六天）

ContextMenu是一款轻量型，功能完善的插件，利用该插件可以在页面的任何位置，设置一个触发右键的事件元素。选中该元素并单击鼠标右键时，通过插件中的ContextMenu方法弹出一个设计精美快捷菜单。该插件具有一下几个显著特点：

1.可以在用同一个页面中设置多个不同样式的菜单。

2.一个菜单可以绑定页面中的多个元素。

3.可随意设置菜单样式。

4.轻松访问与绑定菜单中的各选项。

ContextMenu插件的使用:

（1）插件文件:

Js-8-6/jquery.contextmenu.js

Css-8-6/jquery.contextmenu.css

Images-8-6/全部图片

（2）下载地址：

http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js

（3）功能描述：

在页面中创建一个文本编辑框，选中该文本框，单击鼠标右键，弹出一个设置好的快捷菜单，单击菜单选项时显示所选时显示所选择的选项内容。

（4）实现代码：

<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Js-8-6/jquery.contextmenu.js"></script>
<link rel="stylesheet" href="Css-8-6/jquery.contextmenu.css" />

<style type="text/css">
    ...省略部分代码
</style>

<script type="text/javascript">
    $(function(){
        $('#txtContent').contextMenu('sysMenu',
            {bindings:
                {
                    'Li1':function(Item){
                        alert("在ID号为：" + Item,id + "编辑框中，您点击了"新建"项");
                    },
                    'Li2':function(Item){
                        alert("在ID号为：" + Item,id + "编辑框中，您点击了"打开"项");
                    }
                    ...//设置其他选项事件
                }
            });
    })
</script>

<div class="dibFrame">
    <div class="divTitle">单击右键</div>
    <div div="divContent">
        <textarea id="txtContent" cols="30" rows="5"></textarea>
    </div>
</div>
<div class="contextMenu" id="sysMenu">
    <ul>
        <li id="Li1"><img src="Images-8-6/new.png" />新建</li>
        <li id="Li2"><img src="Images-8-6/floder.png" />打开</li>
        <li id="Li3"><img src="Images-8-6/disk.png" />保存</li>
        <li id="Li4"><img src="Images-8-6/cross.png" />退出</li>
    <ul>
</div>

（5）代码分析：

为了更好的实现页面效果，首先下载插件的JS文件，并重新命名为jquery.contextmenu.js，然后在页面的<title>标记中导入，其执行的代码如下：

<script type="text/javascript" src="Js-8-6/jquery.contextmenu.js"></script>

在HTML页面中，调用插件方法如下：

$.(element).contextMenu(Mid [,Option])

其中，字符参数Mid表示与菜单绑定的元素ID号，可选对象Option可以设置元素与菜单绑定时的属性或事件，其包含的属性和事件代码如下：

$(element).contextMenu(Mid,
    {
        bindings{//绑定菜单时，根据ID号获取或设置各选项属性和事件
            "选项ID号"，function(T){//参数T为被绑定的元素
                ...//获取或设置该选项的属性
            }
        }
    }
)

在上述例子中，单击菜单中"打开"选项时将弹出一个对话框，显示绑定菜单元素的ID号和设置的选项内容，其代码如下：

bindings:
         {
                'Li1':function(Item){
                 alert("在ID号为：" + Item,id + "编辑框中，您点击了"新建"项");
             },
               'Li2':function(Item){
                alert("在ID号为：" + Item,id + "编辑框中，您点击了"打开"项");
             }
            ...//设置其他选项事件
         }

可选项option参数中，除了设置绑定菜单的选项外，还可以设置菜单的默认样式，其样式可以设置如下三部分：

menuStyle:{//菜单外框样式
    ...
}
itemStyle:{//菜单选项框样式
    ...
}
itemHoverStyle:{//选项选中的样式
    ...
}

在本样式中，为了改变弹出快捷菜单的样式加入了如下代码：

$(function(){
        $('#txtContent').contextMenu('sysMenu',
            {bindings:
                {
                   ...
                },
             menuStyle:{    //菜单外框样式
                    border:'2px solid #999'
                },
             itemStyle:{    //菜单选项框样式
                    fontFamily:'verdana',
                    backgroundColor:'#666',
                    color:'white',
                    border:'none',
                    padding:'1px'
                },
             itemHoverStyle:{    //选项选中的样式
                    color:'#666',
                    backgroundColor:'#f7f7f7',
                    border:'none'
                }
            });
    })

为了使用读者对ContextMenu插件有更进一步的了解，下面列出该插件在使用时所调用的全部属性和事件，其完整的调用格式如下：

$(element).contextMenu(Mid
    {
        bindings{//绑定菜单时，根据ID号获取或设置各选项属性和事件
            "选项ID号",function(T){//参数T为被绑定的元素
                ...//获取或设置该选项属性
            }
        }
    },
    menuStyle:{  //菜单外框样式
          ...
        },
    itemStyle:{  //菜单选项样式
          ...
        },
    itemHoverStyle:{  //选项选中样式
          ...
        },
    Shadow:    //设置一个布尔值，默认为true，即显示背景阴影
    eventPosY:    //指定菜单弹出时，在页面中的Y值
    eventPosX:    //指定菜单弹出时，在页面中的X值
    onContextMenu:function(e){//菜单内容显示事件
        //其中通过回调函数中的参数e，可以获取被绑定菜单的元素，即e.target
        //如果该函数返回false，将不会弹出快捷菜单
    },
    onShowMenu:function(e,menu){//菜单显示事件
        //其中通过回调函数中的参数e，可以获取被绑定菜单的元素，即e.target
        //参数menu是显示的菜单，通过该参数可以访问其中的某一个选项，如移除第一个选项，代码如下：
            $('第一个选项ID号',menu).remove();
            return menu;
    }
)

右键菜单插件ContextMenu（如何调用jQuery插件学习第六天）

ContextMenu插件的使用:

猜你喜欢