我正在开发一个视觉Web编辑器项目。这是一个网页,顶部有一个输入文本框,用户输入网站名称后,该网站将在输入字段下方加载(用户可以输入的网站仅限于我们公司开发的网站)。
加载的页面类似于实际网站,所有锚链接都设置为“#”,所有按钮和表单返回false。这意味着用户将停留在页面上,无法导航到加载的网站的其他页面...
用户悬停在每个元素上时,都会被勾画出轮廓,点击元素后用户将被提示可以执行的操作列表。例如,如果他点击了一张图片,他可以更改图片或增加/减少宽度/高度。
我已经成功获取元素,但无法获取上下文菜单...它没有显示出来,因为加载的页面有自己的jquery,并且覆盖了我的jquery。Firebug显示“TypeError: $.contextMenu不是一个函数”,但是当没有加载网站时它能够正常工作。
我知道这可能有点难以理解我想说什么,所以我在下面附上我正在编写的代码片段。这可能有助于您理解。
加载的页面类似于实际网站,所有锚链接都设置为“#”,所有按钮和表单返回false。这意味着用户将停留在页面上,无法导航到加载的网站的其他页面...
用户悬停在每个元素上时,都会被勾画出轮廓,点击元素后用户将被提示可以执行的操作列表。例如,如果他点击了一张图片,他可以更改图片或增加/减少宽度/高度。
我已经成功获取元素,但无法获取上下文菜单...它没有显示出来,因为加载的页面有自己的jquery,并且覆盖了我的jquery。Firebug显示“TypeError: $.contextMenu不是一个函数”,但是当没有加载网站时它能够正常工作。
我知道这可能有点难以理解我想说什么,所以我在下面附上我正在编写的代码片段。这可能有助于您理解。
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="src/jquery.contextMenu.js" type="text/javascript"></script>
<script>
$(function(){
$.contextMenu({
selector: 'body',
trigger: 'left',
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
});
/* other code goes here */
</script>
<body>
<form method="post" action="crossdomain" id="mzwebsubmit">
<input type="text" name="websitename" class="mzweb" value="${websitename }">
<input type="submit" class="mzwebsubmit">
</form>
<form method="post" action="crossdomain" id="finalpageform">
<input type="hidden" name="finalpage" id="finalpage" class="mzweb" >
<input type="submit" value="Save" class="mzweb">
</form>
<hr>
<hr>
<!-- Website Loads in this DIV -->
<div id="visualwebload">${data }</div>
我试图在body上应用它,这样至少当我点击任何地方时它应该出现,但是它没有做任何事情。如果没有加载网站,则它可以完美运行。所以,各位,有人能建议我如何避免问题并获得动态上下文菜单吗?所有上下文菜单依赖项都已正确包含。