我想让我的网站有多个上下文菜单

时间:2014-02-13 06:16:13

标签: jquery html html5 popup contextmenu

您好我希望我的网站有多个上下文菜单,每个菜单都会在div内右键单击。 (不同div的不同菜单)。问题是到目前为止我发现的所有菜单都不允许我使用这个html 5强制下载链接:

<a href="Title Blue.png" download="Title Blue.png">Download Title Picture</a>

我希望这是我上下文菜单中某个项目的链接。

我发现了这段脚本,但由于其中某处存在语法错误,因此无法正常工作。

<script>
$(document).bind(“contextmenu”,(e)) {
   e.preventDefault();                 // To prevent the default context menu.
   $(“#cntnr”).css(“left”, e.pageX);   // For updating the menu position.
   $(“#cntnr”).css(“top”, e.pageY);    // 
   $(“#cntnr”).fadeIn(500, startFocusOut()); //  For bringing the context menu in picture.
};
function startFocusOut() {
    $(document).on(“click”, function () {   
        $(“#cntnr”).hide(500);              // To hide the context menu
        $(document).off(“click”);           
    });
}
$(“#items > li”).click(function () {
    $(“#op”).text(“You have selected “ + $(this).text());  // Performing the selected function.
});
</script>"

另一半只是标准的html列表,它与我的html 5下载链接兼容:

<span id=”op”>Demo Time</span> // For showing output.
  <div id=’cntnr’>                         // Context menu container. 
    <ul id=’items’>                        // List of items in context menu.   
      <li>Item1</li>                      // Items to show in context menu. 
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
    </ul>
  </div>

任何人都可以识别错误或让我在不同的上下文菜单中使用我的html 5链接吗?

由于

1 个答案:

答案 0 :(得分:0)

首先,您需要使用'

更改代码中的所有"

<强> HTML:

<a href="Title Blue.png" download="Title Blue.png">Download Title Picture</a>

<span id='op'>Demo Time</span> 
  <div id='cntnr'>                         
    <ul id='items'>                      
      <li>Item1</li>                     
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
    </ul>
  </div>

<强> JS:

$(document).bind('contextmenu',function(e) {
   e.preventDefault();                 // To prevent the default context menu.
   $('#cntnr').css('left', e.pageX);   // For updating the menu position.
   $('#cntnr').css('top', e.pageY);    // 
   $('#cntnr').fadeIn(500, startFocusOut()); //  For bringing the context menu in picture.
});
function startFocusOut() {
    $(document).on('click', function () {   
        $('#cntnr').hide(500);              // To hide the context menu
        $(document).off('click');           
    });
}
$('#items > li').click(function () {
    $('#op').text('You have selected ' + $(this).text());  // Performing the selected function.
});

工作小提琴here