js自定义右键菜单
2018-01-29 20:04
225 查看
js自定义右键菜单
要把一些小东西记录下来,function Mmenu(nodeId, list) { this.window = window; if (!nodeId || !list) { throw '参数不全' } this.list = list; this.nodeId = nodeId; this.node = document.getElementById(nodeId); if (!this.node) { throw `${nodeId}该节点不存在` } Mmenu.blackTheme(this.node.style) for (let item in list) { Mmenu.childNode(item, list, this.node); } // 创建样式表 let _style = document.createElement("style"); document.head.appendChild(_style); let sheet = _style.sheet; sheet.addRule('.menu-li:hover', 'background-color: #99cc66'); sheet.addRule('.menu-li', 'padding: 10px 10px 10px 20px;'); }; Mmenu.prototype.init = function() { Mmenu.blackTheme(this.node.style) this.window.oncontextmenu = (e) => { e.preventDefault(); let style = this.node.style; style.display = 'block'; style.left = e.clientX + 'px'; style.top = e.clientY + 'px'; } this.window.onclick = (e) => { this.node.style.display = 'none' } }; Mmenu.blackTheme = (style) => { style.backgroundColor = '#333333'; style.color = '#ffffff'; style.width = '110px'; style.height = '132px'; style.paddingTop = '5px'; style.cursor = 'pointer'; style.borderRadius = '6px'; }; Mmenu.childNode = (item, list, node) => { let li = document.createElement('li'); li.style.listStyle = 'none'; li.innerHTML = item; li.onclick = list[item]; li.setAttribute('class', 'menu-li') node.appendChild(li) }
方法调用
let menu = new Mmenu('menu', { '删除': _delete, '打开': _open, '下载': _download }); menu.init() function _delete() { alert('delete') }; function _open() { alert('open'); }; function _download() { alert('download'); };
效果显示
相关文章推荐
- js自定义鼠标右键菜单
- jQuery,JS实现自定义鼠标右键菜单
- JS 右键自定义菜单
- [置顶] echars-all.js 2.2.7组织结构图及自定义右键菜单的实现思路及源码
- js屏蔽鼠标右键默认事件以实现自定义菜单
- JS 右键自定义菜单
- JS 右键自定义菜单
- js实现完全自定义可带多级目录的网页鼠标右键菜单方法
- js自定义右键菜单
- js实现完全自定义可带多级目录的网页鼠标右键菜单方法
- js禁止默认的右键菜单或出现自定义右键菜单
- js实现鼠标右键自定义菜单(弹出层),并与树形菜单(TreeView)、iframe合用(兼容IE、Firefox、Chrome)
- JS实现自定义右键菜单
- JS实现自定义右键菜单
- JS简单实现自定义右键菜单实例
- 任意位置生成右键自定义菜单插件context.js之API与调用
- js实现右键自定义菜单
- JS实现的自定义右键菜单实例二则
- Ferris教程学习笔记:js示例5.7 自定义右键菜单,请在页面点击右键查看效果。
- 为右键新建菜单添加自定义后缀(.html, .css, .js, .py)项