javascript自定义右键菜单插件


Posted in Javascript onDecember 16, 2019

本文实例为大家分享了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()
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 #Javascript
js实现数字滚动特效
Dec 16 #Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 #Javascript
js实现内置计时器
Dec 16 #Javascript
js实现秒表计时器
Dec 16 #Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 #Javascript
js实现计时器秒表功能
Dec 16 #Javascript
You might like
在PHP的图形函数中显示汉字
2006/10/09 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
python中time库的实例使用方法
2019/10/31 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
软件工程专业推荐信
2013/10/28 职场文书
安全保证书怎么写
2015/02/28 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
听证通知书
2015/04/24 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
尝试使用Python爬取城市租房信息
2022/04/12 Python