jquery插件ContextMenu設(shè)置右鍵菜單
Struts項(xiàng)目中右鍵菜單一般很少用到，但是一旦客戶(hù)有要求，很多人就懵圈了，比如我。這個(gè)時(shí)候，當(dāng)然要表現(xiàn)鎮(zhèn)定，一面拍著胸口對(duì)客戶(hù)承諾說(shuō)絕對(duì)可以實(shí)現(xiàn)，一面趕緊打開(kāi)百度神器，搜搜看是否有前人已經(jīng)寫(xiě)好的插件。
于是便找到了jQuery的ContextMenu插件。上官網(wǎng)看看Demo，真不錯(cuò)，正是我要的效果。源碼下下來(lái)，卻沒(méi)有說(shuō)明文檔告訴我們?cè)撊绾谓M裝，可能寫(xiě)這插件的牛人們覺(jué)得步驟太簡(jiǎn)單，寫(xiě)出來(lái)都覺(jué)得丟人?？煽嗔宋覀冞@等愚昧之徒，研究半天，總算從一堆代碼中取其精華棄其糟粕，形成最簡(jiǎn)練的代碼，以供初學(xué)者們參考。
官網(wǎng)下載地址：http://plugins.jquery.com/contextMenu/
我這邊下的是1.6.6版本。源碼目錄結(jié)構(gòu)如下：
里邊有個(gè)demo.html文件，這個(gè)就是我們要研究的對(duì)象。打開(kāi)這個(gè)文件，可以試試效果，感覺(jué)不錯(cuò)吧。
但是用記事本或者其他編輯器查看源代碼，你會(huì)覺(jué)得頭暈。一堆的js文件和css文件，恐怖不是每個(gè)都是必須的，這就要我們自己調(diào)試了，插件作者是不會(huì)告訴我們的。
OK，由于時(shí)間關(guān)系，我已經(jīng)幫大家刪掉多余的代碼，精簡(jiǎn)后的代碼如下：
<html>
<head>
<title>jQuery contextMenu Plugin Demo</title>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="src/jquery.contextMenu.js" type="text/javascript"></script>
<link href="src/jquery.contextMenu.css" rel="external nofollow" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="context-menu-one">
<strong>right click me</strong>
</div>
<script type="text/javascript" class="showcase">
$(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: "quit"}
}
});
$('.context-menu-one').on('click', function(e){
console.log('clicked', this);
})
});
</script>
</body>
</html>
運(yùn)行效果：
根據(jù)這段精簡(jiǎn)后的代碼，我們就可以知道使用這個(gè)插件了。
第一步：把核心文件jquery-1.8.2.min.js、jquery.contextMenu.js、jquery.contextMenu.css拷貝至我們的項(xiàng)目中。
第二步：編寫(xiě)生成菜單以及相應(yīng)菜單動(dòng)作的javascript腳本。
$(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: "quit"}
}
});
$('.context-menu-one').on('click', function(e){
console.log('clicked', this);
})
});
第三步：在合適的位置設(shè)置右鍵菜單。
<div class="context-menu-one"> <strong>right click me</strong> </div>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- JQuery右鍵菜單插件ContextMenu使用指南
- jQuery右鍵菜單contextMenu使用實(shí)例
- JS組件Bootstrap ContextMenu右鍵菜單使用方法
- 網(wǎng)頁(yè)中右鍵功能的實(shí)現(xiàn)方法之contextMenu的使用
- 使用contextMenu插件實(shí)現(xiàn)Bootstrap table彈出右鍵菜單
- 3種不同的ContextMenu右鍵菜單實(shí)現(xiàn)代碼
- 開(kāi)發(fā) Internet Explorer 右鍵功能表(ContextMenu)
- jQuery插件ContextMenu自定義圖標(biāo)
相關(guān)文章
正如標(biāo)題所言其所用為匹配 prev 元素之后的所有 siblings 元素，下面為大家分享個(gè)示例，不了解的朋友可以學(xué)習(xí)下2013-08-08
這篇文章主要介紹了jQuery選擇器用法,結(jié)合實(shí)例分析了jQuery選擇器的具體使用技巧與注意事項(xiàng),需要的朋友可以參考下2015-12-12
這篇文章主要介紹了2種jQuery 實(shí)現(xiàn)刮刮卡效果,需要的朋友可以參考下2015-02-02
jQuery validata插件實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery validata插件實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
最近在做項(xiàng)目的時(shí)候使用了Jquery~新手學(xué)習(xí)jquery.~遇到了一些"奇怪"的問(wèn)題(各位大神別拍磚).感謝ClassYuan老大的支持2010-08-08
本文主要給大家分享的是使用jQuery實(shí)現(xiàn)html元素可拖拽的效果，十分的炫酷，代碼也相對(duì)比較簡(jiǎn)單，有需要的小伙伴可以參考下。2015-07-07
jquery寫(xiě)個(gè)checkbox——類(lèi)似郵箱全選功能
最近在學(xué)習(xí)jquery，今天抽空用jquery寫(xiě)個(gè)checkbox——類(lèi)似郵箱全選功能，感興趣的你可以參考下哈，希望可以幫助到你2013-03-03![jQuery 判斷是否包含在數(shù)組中Array[]的方法](http://img.jbzj.com/images/xgimg/bcimg7.png)
jQuery 判斷是否包含在數(shù)組中Array[]的方法
下面小編就為大家?guī)?lái)一篇jQuery 判斷是否包含在數(shù)組中Array[]的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
基于jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片橫向滾動(dòng)
點(diǎn)擊左右按鈕圖片橫向滾動(dòng)jquery，一次滾動(dòng)四個(gè)，圖片滾動(dòng)完成，自動(dòng)回到第一個(gè)版面，效果相當(dāng)不錯(cuò)，感興趣的前端工程師們可以參考下2013-04-04
這篇文章主要介紹了jquery-mobile基礎(chǔ)屬性與用法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery-mobile常用屬性功能與具體使用技巧,需要的朋友可以參考下2016-11-11