欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

網(wǎng)頁(yè)中右鍵功能的實(shí)現(xiàn)方法之contextMenu的使用

 更新時(shí)間：2017年02月20日 09:30:15   作者：lanyang123456  
本文介紹一種網(wǎng)頁(yè)中實(shí)現(xiàn)右鍵功能的方案–contextMenu,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

本文介紹一種網(wǎng)頁(yè)中實(shí)現(xiàn)右鍵功能的方案–contextMenu。

1.下載

下載地址

https://github.com/swisnl/jQuery-contextMenu

下載得到壓縮文件jQuery-contextMenu-master.zip

解壓后，使用dist目錄下css、js。

2.使用方法

使用步驟：

(1) 引用css、js。

(2) html、js代碼。

簡(jiǎn)單例子如下：

代碼test.html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="libs/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="external nofollow" rel="stylesheet"/>
<script src="libs/jQuery/jquery-1.8.3.min.js"></script>
<script src="libs/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>
</head>
<body>
<span class="context-menu-one btn btn-neutral">right click me</span>
<script>
  $(function() {
    $.contextMenu({
      selector: '.context-menu-one', 
      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: function(){
          return 'context-menu-icon context-menu-icon-quit';
        }}
      }
    });
    $('.context-menu-one').on('click', function(e){
      console.log('clicked', this);
    })  
  });
</script>
</body>
</html>

效果圖：

contextmenu效果圖

3.Demo and Document

https://swisnl.github.io/jQuery-contextMenu/demo.html
http://swisnl.github.io/jQuery-contextMenu/demo/on-dom-element.html

以上所述是小編給大家介紹的網(wǎng)頁(yè)中右鍵功能的實(shí)現(xiàn)方法之contextMenu的使用，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論