Question

我一直试图弄清楚如何使用s-yadav中的contextMenu.js插件。

我已经下载了js和css文件，并将它们保存到与我的php脚本相同的文件夹中。

该插件的示例在此页面上：http://ignitersworld.com/lab/contextMenu.html#demo

但是，我正在努力弄清楚如何在页面上激活它们。我假设我需要调用插件，然后脚本需要在标签之间进行。

但是，这不会产生任何结果。代码如下。有人能指出我正确的方向吗？

谢谢

<head> 
<link rel="stylesheet" type="text/css" href="contextMenu.css" />
<script src="contextMenu.js"></script>
</head>

<body>
<script>
//For example we are defining menu in object. You can also define it on Ul list. See on documentation.
var menu = [{
        name: 'create',
        img: 'images/create.png',
        title: 'create button',
        fun: function () {
            alert('i am add button')
        }
    }, {
        name: 'update',
        img: 'images/update.png',
        title: 'update button',
        fun: function () {
            alert('i am update button')
        }
    }, {
        name: 'delete',
        img: 'images/delete.png',
        title: 'delete button',
        fun: function () {
            alert('i am delete button')
        }
    }];

//Calling context menu
 $('.testButton').contextMenu(menu);
</script>

<div id="testButton1" class="testButton iw-mTrigger">Click me</div>
</body>

Answer 1

除了在＆＃34之后移动代码;点击我＆＃34; div你需要在contextmenu.js之前添加jQuery库。例如：

<head> 
<link rel="stylesheet" type="text/css" href="contextMenu.css" />

<script type="text/javascript" 
src=" http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js">
</script>

<script src="contextMenu.js"></script>
</head>

此外，您的代码还包含指向图片的链接（例如img：＆＃39; images / update.png＆＃39;），但我不认为您拥有它们，因此它们会显示为断开的链接。

Answer 2

您在元素存在之前调用代码。如果在运行代码时元素不存在，它将只是静默失败

将脚本标记移动到<body>的底部，以便它引用的html在它之前或包装代码如下：

$(function(){
    $('.testButton').contextMenu(menu);
});

请参阅：ready() docs

如何使用contextMenu.js

2 个答案: