龙空技术网

如何使用jQuery-ContextMenu实现右击菜单

走拍深圳 226

前言:

眼前你们对“jquery点击切换菜单栏”大概比较珍视,姐妹们都想要剖析一些“jquery点击切换菜单栏”的相关文章。那么小编在网络上搜集了一些有关“jquery点击切换菜单栏””的相关内容,希望兄弟们能喜欢,兄弟们快快来了解一下吧!

最近在做项目中,遇到一个棘手的问题,页面上有很多功能需要实现,每个功能需要绑定一个按钮。如果一个功能绑定一个按钮,那么将会占用页面很大的空间,而且可能会使页面变得不美观。思前想后,决定将所有按钮做成右键菜单里。于是便找到了jQuery-ContextMenu这款插件。使用简单,效果也很不错。接下来就为大家简述一下该如何使用这款插件。

一、引入资源文件

我们需要在html页面里引入三个资源文件,分别jquery的js文件,jquery-contextMenu的js和css文件,如下所示:

[html] view plain copy

<scriptsrc="../../libs/jquery/jquery-2.1.4.min.js"></script>

<scripttype="text/javascript"src="../../libs/jQuery-contextMenu/jquery.contextMenu.min.js"></script>

<linkrel="stylesheet"type="text/css"href="../../libs/jQuery-contextMenu/jquery.contextMenu.min.css">

<linkhref="../../fonts/font-awesome-4.7.0/css/font-awesome.min.css"rel="stylesheet">

二、将jquery-contextMenu绑定到元素中

我们假设html中待绑定的元素的代码如下:

<spanclass="context-menu-one btn btn-neutral">right click me</span>

确定好绑定的元素后,需要写入一下js代码:

$.contextMenu({

selector: "span.context-menu-one",

items: {

"新增Folder": {name: "新增Folder", icon: "fa-plus",

callback: function(key, opt){

addFolder();

}

},

"批量创建计划": {name: "批量创建计划", icon: "fa-plus-square",

callback: function(key, opt){

bulkCreatePlan();

}

},

},

callback: function(itemKey, opt) {

var node = $.ui.fancytree.getNode(opt.$trigger);

alert("select " + itemKey + " on " + node);

}

});

其中,selector字段表示待绑定元素的位置信息;items中包括“新增Folder”和“批量创建计划”两个右击菜单选项,callback里可以定义菜单选项需要响应的事件。

效果如下图所示:

三、配合font-awesome使用

当我们需要给右击菜单绑定多个菜单选项时,每项功能需要对应一个图标,这个时候,我们可以使用font-awesome图标来满足我们的需求。

1)首先,我们在html中引入font-awesome的资源文件font-awesome.min.css

<linkhref="../../fonts/font-awesome-4.7.0/css/font-awesome.min.css"rel="stylesheet">

2)然后,在items里的icon字段写上图标的标签,例如:

需要注意的是,引入的font-awesom.min.css的版本必须在4.7.0以上。

标签: #jquery点击切换菜单栏