網(wǎng)頁中右鍵功能的實(shí)現(xiàn)方法之contextMenu的使用
本文介紹一種網(wǎng)頁中實(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代碼。
簡單例子如下:
代碼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)頁中右鍵功能的實(shí)現(xiàn)方法之contextMenu的使用,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
判斷文字超過2行添加展開按鈕,未超過則不顯示,溢出部分顯示省略號
這篇文章主要介紹了判斷文字超過2行添加展開按鈕,未超過則不顯示,溢出部分顯示省略號,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04JavaScript實(shí)現(xiàn)復(fù)制或剪切內(nèi)容到剪貼板功能的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)復(fù)制或剪切內(nèi)容到剪貼板功能的方法,我們平時(shí)看到的網(wǎng)頁上很多一鍵復(fù)制功能就是如此實(shí)現(xiàn),需要的朋友可以參考下2016-05-05ajax如何實(shí)現(xiàn)頁面局部跳轉(zhuǎn)與結(jié)果返回
AJAX即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù),通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新,本篇文章給大家介紹ajax如何實(shí)現(xiàn)頁面局部跳轉(zhuǎn)與結(jié)果返回,感興趣的朋友一起來學(xué)習(xí)2015-08-08javascript強(qiáng)大的日期函數(shù)代碼分享
這篇文章介紹了javascript強(qiáng)大的日期函數(shù)代碼,有需要的朋友可以參考一下2013-09-09js根據(jù)當(dāng)前日期獲取前一周或者后一周等日期
有的時(shí)候要獲取當(dāng)前日期,或者前一天、后一天的日期,下面這篇文章主要給大家介紹了關(guān)于js根據(jù)當(dāng)前日期獲取前一周或者后一周等日期的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04JavsScript中Promise的錯(cuò)誤捕獲詳解
怎么捕獲錯(cuò)誤并且處理是一門語言必備的知識,在JavaScript中也是如此,下面這篇文章主要給大家介紹了關(guān)于JavsScript中Promise錯(cuò)誤捕獲的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06關(guān)于ligerui子頁面關(guān)閉后,父頁面刷新,重新加載的方法
今天小編就為大家分享一篇關(guān)于ligerui子頁面關(guān)閉后,父頁面刷新,重新加載的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09js利用for in循環(huán)獲取 一個(gè)對象的所有屬性以及值的實(shí)例
下面小編就為大家?guī)硪黄猨s利用for in循環(huán)獲取 一個(gè)對象的所有屬性以及值的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03