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 相关文章推荐
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
javascript 获取图片颜色
Apr 05 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
js实现弹窗效果
Aug 09 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 图片加水印与上传图片加水印php类
2010/05/12 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
python和ruby,我选谁?
2017/09/13 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
铁路工务反思材料
2014/02/07 职场文书
社区母亲节活动记录
2014/03/06 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
任命书标准格式
2015/03/02 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
vue中data里面的数据相互使用方式
2022/06/05 Vue.js
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android