jQuery插件ContextMenu自定義圖標(biāo)
更新時間：2017年03月15日 14:11:58 作者：seabreezesuper
這篇文章主要為大家詳細(xì)介紹了jQuery插件ContextMenu自定義圖標(biāo)的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
jQuery的ContextMenu插件使用起來非常簡單（當(dāng)前前提是看了我的上一篇微博，哈哈），但是想改菜單的圖標(biāo)，很多人又要懵圈了。因為ContextMenu插件只提供了有限的幾個圖標(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)在我們想增加一個“Help”選項，圖標(biā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); }
好了，大功告成，效果如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文重點給大家介紹了jQuery中的2個函數(shù)hover和toggle的使用方法和示例，非常的簡單實用，推薦給小伙伴們參考下。2015-02-02
在次封裝easyui-Dialog插件實現(xiàn)代碼，需要的朋友可以參考下。2010-11-11
這篇文章主要介紹了JQuery如何按name屬性選擇元素問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
jQuery簡單實現(xiàn)的HTML頁面文本框模糊匹配查詢功能完整示例
這篇文章主要介紹了jQuery簡單實現(xiàn)的HTML頁面文本框模糊匹配查詢功能,涉及jQuery事件響應(yīng)模擬列表框的下拉數(shù)據(jù)展示與隱藏,以及元素遍歷、匹配等相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
利用jQuery+localStorage實現(xiàn)一個簡易的計時器示例代碼
這篇文章主要給大家介紹了關(guān)于利用jQuery+localStorage實現(xiàn)一個簡易的計時器的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery樹插件zTree的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了使用jquery+CSS實現(xiàn)控制打印樣式,需要的朋友可以參考下2014-12-12
jQuery購物車插件jsorder用法(支持后臺處理程序直接轉(zhuǎn)換成DataTable處理)
這篇文章主要介紹了jQuery購物車插件jsorder用法,結(jié)合實例形式分析了購物車jsorder插件基于ajax與后臺交互的相關(guān)技巧,需要的朋友可以參考下2016-06-06
本篇文章主要是對利用js(jquery)操作Cookie的方法進(jìn)行了詳細(xì)的說明介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
使用jQuery加載html頁面到指定的div實現(xiàn)方法
下面小編就為大家?guī)硪黄褂胘Query加載html頁面到指定的div實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07