Utilisez js pour implémenter un plug-in de menu contextuel personnalisé

1. Comment utiliser

introduction du fichier jsffdf123102e8d0ef8a497c1b31dafaab2cacc6d41bbb37262a98f745aa00fbf0

Initialisation :

let rightMenu = new RightMenu({
   targetId:'menu',//需要改变右键菜单的元素id
   menuItems: items//菜单项数据，json数组
   })

paramètres menuItems

items = [
 {
 id: 'aa',//菜单id
 text: 'ccc',//菜单文字，可以是html元素
 show: true, //菜单是否显示
 active: false,//菜单是否可用
 style: 'item-unactive'
 }
]

3. Méthode

setItems(menuItems) définit le menu. Menu des paramètres dynamiques

hide() Masquer le menu

on(eventType, event) Écoute de l'événement

4. Événement

itemClick clic sur l'élément de menu, fonction de rappel. Les paramètres sont tous des attributs de l'élément de menu

Exemple :

rightMenu.on('itemClick',(param) => {
 console.log(param)
 if(param.active === false){
 return
 }
 alert(JSON.stringify(param))
 // rightMenu.hide()
})

createBefore est appelé avant que le contenu du menu ne soit généré, ce qui peut réaliser des paramètres de menu dynamiques

Exemple :

rightMenu.on('createBefore',(param) => {
 rightMenu.setItems(items1)
})

Remarque : La fonction cascade n'est pas encore supportée

Code :

class RightMenu{
 constructor(param){
 this.targetId = param.targetId
 this.ele = document.querySelector('#' + this.targetId)
 console.assert(this.ele != null, '未找到id=' + this.targetId + '的元素')
 this.menu = null
 this.menuItems = param.menuItems
 this._menuItems = {}
 this.itemDefaultClass = 'item-default'
 this.event = {
 itemClick: null,
 createBefore: null
 }
 this.flag = true
 this.init()
 }
 
 init(){
 let that = this
 that.createMenu()
 this.ele.oncontextmenu = function(ee) {
 let e = ee || window.event;
 //鼠标点的坐标
 let oX = e.clientX;
 let oY = e.clientY;
 //菜单出现后的位置
 that.menu.style.display = "block";
 that.menu.style.left = oX + "px";
 that.menu.style.top = oY + "px";
 that.createMenu()
 //阻止浏览器默认事件
 return false;//一般点击右键会出现浏览器默认的右键菜单，写了这句代码就可以阻止该默认事件。
 }
 document.oncontextmenu = function(ee){
 let e = ee || window.event;
 if(e.target.id !== that.targetId && e.target.dataset.type != 'item'){
 that.menu.style.display = "none"
 }
 }
 document.onclick = function(ee) {
 let e = ee || window.event;
 that.menu.style.display = "none"
 }
 that.menu.onclick = function(ee) {
 let e = ee || window.event;
 if(e.target.dataset.type == 'item'){
 if(that.event.itemClick instanceof Function){
  that.event.itemClick(that._menuItems[e.target.id])
 }
 }
 e.cancelBubble = true;
 }
 this.menu.onmouseover = function(ee){
 that.flag = true
 }
 this.menu.onmouseleave = function(ee){
 that.flag = false
 }
 }
 createMenu(){
 if(this.menu == null){
 this.menu = document.createElement('div')
 this.menu.className = 'menu-default'
 document.body.appendChild(this.menu)
 }
 
 let mark = true
 if(this.event.createBefore instanceof Function){
 mark = this.event.createBefore()
 }
 if(mark){
 this.creatItem()
 }
 }
 _bindOncontextmenu(obj){
 obj.oncontextmenu = function(ee){
 ee.target.click()
 return false
 }
 }
 creatItem(){
 if(this.menuItems.length == 0){
 return
 }
 let fragement = document.createDocumentFragment()
 let temp = null
 let tempItem = null
 for (let i = 0, len = this.menuItems.length; i < len; i++){
 tempItem = this.menuItems[i]
 if(tempItem.show === false){
 continue
 }
 temp = document.createElement(&#39;div&#39;)
 temp.id = tempItem.id
 temp.innerHTML = tempItem.text
 temp.className = tempItem.style || &#39;item-default&#39;
 temp.dataset.type = &#39;item&#39;
 
 this._menuItems[tempItem.id] = tempItem
 fragement.appendChild(temp)
 this._bindOncontextmenu(temp)
 }
 this.menu.innerHTML = &#39;&#39;
 this.menu.appendChild(fragement)
 }
 
 on(type,event){
 this.event[type] = event
 }
 
 hide(){
 this.menu.style.display = &#39;none&#39;
 }
 
 setItems(items){
 this.menuItems = items
 this.creatItem()
 }
}

Tutoriel recommandé :

tutoriel js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!