jQuery-contextMenu使用教程
效果如下图所示。在【右击菜单】处右击，会出现下面的效果。
添加引用
<script src="jQuery-contextMenu-master/dist/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="jQuery-contextMenu-master/dist/jquery.contextMenu.css">
<script src="jQuery-contextMenu-master/dist/jquery.contextMenu.js"></script>
<script src="jQuery-contextMenu-master/dist/jquery.ui.position.js"></script>
然后加入下面的代码
$(document).ready(function () {
$.contextMenu({
selector: "#input1" ,
callback: function (key, options) {
alert(options.selector + " " + key);
},
items: {
"log": { name: "查看日志", icon: "edit" },
"skip": {
name: "跳过此步骤", icon: function () {
return 'context-menu-icon context-menu-icon-quit';
}
},
"test1": {
name: "马良测试1", icon: function () {
return 'context-menu-icon context-menu-icon-loading';
}
}
,
"test2": {
name: "马良测试1", icon: function () {
return 'context-menu-icon context-menu-icon-edit';
}
}
,
"test3": {
name: "马良测试1", icon: function () {
return 'context-menu-icon context-menu-icon-delete';
}
}
,
"test4": {
name: "马良测试1", icon: function () {
return 'context-menu-icon context-menu-icon-cut';
}
}
,
"test5": {
name: "马良测试1", icon: function () {
return 'context-menu-icon context-menu-icon-add';
}
}
,
"test6": {
name: "马良测试1", icon: function () {
return 'context-menu-icon context-menu-icon-copy';
}
}
}
});
})