使用JQuery的动态上下文菜单
Dynamic Context Menus using JQuery
创建动态上下文菜单
这是上下文菜单的Html代码
<div class="simple-context-menu">Right Click Me</div>
Javascript文件显示在下面
// setup:
// Install JQuery Plugin from here:
// https://github.com/swisnl/jQuery-contextMenu
// DOCS: http://swisnl.github.io/jQuery-contextMenu/
var menu1_item_names = ['item1', 'item2', 'item3'];
var menu2_item_names = ['item4', 'item5', 'item6'];
$.contextMenu({
selector: '.test-context-menu',
build: function($trigger, e) {
var options = {
callback: function(key, options) {
alert("Clicked on " + key + " on element " + options.$trigger.attr("id"));
// TODO:
// Display NAME of the menu item clicked(example: item1)
//alert("Clicked on item: " + JSON.stringify(options.items));
return false;
},
// start with an empty map
items: {
"fold1": {
"name": "menu 1",
"items": {}
},
"fold2": {}
}
};
$.each(menu1_item_names, function(k, v) {
options.items.fold1.items[k] = {
name: v
};
});
if (typeof menu2_item_names !== 'undefined' && menu2_item_names.length > 0) {
options.items.fold2 = {
"name": "menu 2",
"items": {}
}
$.each(menu2_item_names, function(k, v) {
options.items.fold2.items[k] = {
name: v
};
});
}
options.items.sep1 = "---------";
options.items.quit = {
name: "Quit"
};
return options;
}
});
注:当您运行它并右键单击上面的文本字段时,会出现一个上下文菜单
点击任何菜单项,你会看到(警报框),菜单项索引位置,例如0,1 2…
而不是中单击的项目名称
我想看看菜单项的名称
以及上下文菜单的JSFiddle。
提前感谢
您可以在回调函数上使用此函数:
options.$selected.text()
相关文章:
- 使用JQuery的动态上下文菜单
- JQuery在单击正文时隐藏上下文菜单
- JQuery上下文菜单显示/隐藏问题
- 防止在移动Safari(iPad/iPhone)中长按/长按默认上下文菜单
- d3防止在上下文菜单上触发mouseout
- 何时可以;我的用户脚本在Javascript中触发右键单击(上下文菜单)
- 使用JSTree上下文菜单捕获新创建的节点
- 在GXT中激活上下文菜单时,如何保持选中的文本高亮显示?(EXT GWT 2.x)
- HTML5上下文菜单-当菜单项被点击时,访问最初被点击的元素
- 可替代多级上下文菜单
- 如何在鼠标悬停时显示带有拉斐尔元素(圆、线)的上下文菜单
- 在上下文菜单项单击上显示侧边栏/弹出窗口的最佳方法是什么
- 如何使用jstree删除上下文菜单中的编辑选项
- 如何使用Windows Phone在IE上禁用上下文菜单(保存和共享照片)
- TinyMCE 在上下文菜单中创建子菜单
- D3 上下文菜单,更改所选节点颜色
- 剑道上下文菜单 - 防止在鼠标按下时关闭
- 将上下文菜单附加到大量图形点
- API Google Maps Javascript在上下文菜单中调用事件侦听器
- 禁用特定元素的移动长按上下文菜单