javascript自定义右键菜单插件
更新时间:2019年12月16日 10:54:06 作者:单调的黑白灰
这篇文章主要为大家详细介绍了javascript自定义右键菜单插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了javascript自定义右键菜单插件的具体代码,供大家参考,具体内容如下
1.使用方式
js文件引入<script src="RightMenu.js"></script>
初始化:
let rightMenu = new RightMenu({ targetId:'menu',//需要改变右键菜单的元素id menuItems: items//菜单项数据,json数组 })
2.menuItems参数
items = [ { id: 'aa',//菜单id text: 'ccc',//菜单文字,可以是html元素 show: true, //菜单是否显示 active: false,//菜单是否可用 style: 'item-unactive' } ]
3.方法
setItems(menuItems) 设置菜单。动态设置菜单
hide() 隐藏菜单
on(eventType, event) 事件监听
4.事件
itemClick 菜单项点击,回调函数参数为菜单项的所有属性
例:
rightMenu.on('itemClick',(param) => { console.log(param) if(param.active === false){ return } alert(JSON.stringify(param)) // rightMenu.hide() })
createBefore 菜单内容生成前调用,可以实现动态菜单设置
例:
rightMenu.on('createBefore',(param) => { rightMenu.setItems(items1) })
注:暂不支持级联功能
代码:
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('div') temp.id = tempItem.id temp.innerHTML = tempItem.text temp.className = tempItem.style || 'item-default' temp.dataset.type = 'item' this._menuItems[tempItem.id] = tempItem fragement.appendChild(temp) this._bindOncontextmenu(temp) } this.menu.innerHTML = '' this.menu.appendChild(fragement) } on(type,event){ this.event[type] = event } hide(){ this.menu.style.display = 'none' } setItems(items){ this.menuItems = items this.creatItem() } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
elementui-树形控件实现子节点右侧添加图标和数据鼠标放上去显示文字效果
这篇文章主要介绍了elementui-树形控件实现子节点右侧添加图标和数据鼠标放上去显示文字效果,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-01-01获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll...2006-09-09
最新评论