網(wǎng)頁中右鍵功能的實現(xiàn)方法之contextMenu的使用
更新時間：2017年02月20日 09:30:15 作者：lanyang123456
本文介紹一種網(wǎng)頁中實現(xiàn)右鍵功能的方案–contextMenu,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
本文介紹一種網(wǎng)頁中實現(xiàn)右鍵功能的方案–contextMenu。
1.下載
下載地址
https://github.com/swisnl/jQuery-contextMenu
下載得到壓縮文件jQuery-contextMenu-master.zip
解壓后，使用dist目錄下css、js。
2.使用方法
使用步驟：
(1) 引用css、js。
(2) html、js代碼。
簡單例子如下：
代碼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>
效果圖：
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)頁中右鍵功能的實現(xiàn)方法之contextMenu的使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細介紹了js實現(xiàn)多個標題吸頂效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
js中判斷數(shù)字\字母\中文的正則表達式，需要的朋友可以參考下2012-06-06
網(wǎng)頁加載時頁面顯示進度條加載完成之后顯示網(wǎng)頁內(nèi)容
網(wǎng)頁加載時頁面顯示進度條（加載完成時顯示網(wǎng)頁內(nèi)容）,這種效果在瀏覽網(wǎng)頁很常見，本文也介紹一種實現(xiàn)方法，需要了解的朋友可以參考下2012-12-12
d3.js實現(xiàn)簡單的網(wǎng)絡拓撲圖實例代碼
最近一直在學習d3.js，大家都知道d3.js是一個非常不錯的數(shù)據(jù)可視化庫，我們可以用它來做一些比較酷的東西，比如可以來顯示一些簡單的網(wǎng)絡拓撲圖，這篇文中就通過實例代碼給大家介紹了如何利用d3.js實現(xiàn)簡單的網(wǎng)絡拓撲圖，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-11-11
這篇文章主要介紹了JS實現(xiàn)仿雅虎首頁快捷登錄入口及導航模塊效果,涉及JavaScript響應鼠標事件遍歷頁面元素的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
javascript教程:關(guān)于if簡寫語句優(yōu)化的方法
這篇文章主要介紹了js中if簡寫語句優(yōu)化的方法,需要的朋友可以參考下2014-05-05
在學習typescript的過程中發(fā)現(xiàn)在vscode上不能很好地的輸出typescript的運行結(jié)果,需要先將typescript編譯為javascript,在通過node執(zhí)行js文件得到結(jié)果,這篇文章給大家介紹如何在vscode上直接運行typescript,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了JavaScript 鏈表定義與使用方法,結(jié)合實例形式分析了JavaScript 鏈表的基本功能、定義與使用方法,需要的朋友可以參考下2020-04-04
用javascript實現(xiàn)自動輸出網(wǎng)頁文本
這篇文章主要介紹了用javascript實現(xiàn)自動輸出網(wǎng)頁文本，用到兩個函數(shù)：setTimeout(),遞歸和String.substring();,需要的朋友可以參考下2015-07-07
html的DOM中document對象forms集合用法實例
這篇文章主要介紹了html的DOM中document對象forms集合用法,實例分析了forms集合的功能與使用技巧,需要的朋友可以參考下2015-01-01