jQuery插件ContextMenu自定義圖標(biāo)
jQuery的ContextMenu插件使用起來非常簡(jiǎn)單（當(dāng)前前提是看了我的上一篇微博，哈哈），但是想改菜單的圖標(biāo)，很多人又要懵圈了。因?yàn)镃ontextMenu插件只提供了有限的幾個(gè)圖標(biāo)，如剪切、拷貝、刪除等等。
修改圖標(biāo)的相關(guān)代碼：
$(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);
})
});
圖標(biāo)效果：
現(xiàn)在我們想增加一個(gè)“Help”選項(xiàng)，圖標(biāo)為一個(gè)問號(hào)圖形，該怎么辦呢？
首先，得準(zhǔn)備一張16*16的png圖片。網(wǎng)上搜索到合適圖片，再用Photoshop或者美圖秀秀裁剪一下就OK。把圖片命名為help.png，將該圖片拷貝至指定的images文件夾中。
然后在上面那段代碼中加上以下這句代碼：
"help": {name: "Help", icon: "help"}
再接著修改jquery.contextMenu.css文件，找到定義圖標(biāo)圖片的位置，添加Help圖標(biāo)的相應(yīng)代碼。
.context-menu-item.icon-help { background-image: url(images/help.png); }
好了，大功告成，效果如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文重點(diǎn)給大家介紹了jQuery中的2個(gè)函數(shù)hover和toggle的使用方法和示例，非常的簡(jiǎn)單實(shí)用，推薦給小伙伴們參考下。2015-02-02
在次封裝easyui-Dialog插件實(shí)現(xiàn)代碼
在次封裝easyui-Dialog插件實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-11-11
這篇文章主要介紹了JQuery如何按name屬性選擇元素問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
jQuery簡(jiǎn)單實(shí)現(xiàn)的HTML頁(yè)面文本框模糊匹配查詢功能完整示例
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)的HTML頁(yè)面文本框模糊匹配查詢功能,涉及jQuery事件響應(yīng)模擬列表框的下拉數(shù)據(jù)展示與隱藏,以及元素遍歷、匹配等相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
利用jQuery+localStorage實(shí)現(xiàn)一個(gè)簡(jiǎn)易的計(jì)時(shí)器示例代碼
這篇文章主要給大家介紹了關(guān)于利用jQuery+localStorage實(shí)現(xiàn)一個(gè)簡(jiǎn)易的計(jì)時(shí)器的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery樹插件zTree的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
使用jquery+CSS實(shí)現(xiàn)控制打印樣式
這篇文章主要介紹了使用jquery+CSS實(shí)現(xiàn)控制打印樣式,需要的朋友可以參考下2014-12-12
jQuery購(gòu)物車插件jsorder用法(支持后臺(tái)處理程序直接轉(zhuǎn)換成DataTable處理)
這篇文章主要介紹了jQuery購(gòu)物車插件jsorder用法,結(jié)合實(shí)例形式分析了購(gòu)物車jsorder插件基于ajax與后臺(tái)交互的相關(guān)技巧,需要的朋友可以參考下2016-06-06
本篇文章主要是對(duì)利用js(jquery)操作Cookie的方法進(jìn)行了詳細(xì)的說明介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
使用jQuery加載html頁(yè)面到指定的div實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄褂胘Query加載html頁(yè)面到指定的div實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07