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()
 }
}

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

(0)

相关推荐

  • javascript自定义右键菜单插件

    本文实例为大家分享了javascript自定义右键菜单插件的具体代码,供大家参考,具体内容如下 1.使用方式 js文件引入<script src="RightMenu.js"></script> 初始化: let rightMenu = new RightMenu({ targetId:'menu',//需要改变右键菜单的元素id menuItems: items//菜单项数据,json数组 }) 2.menuItems参数 items = [ { id: 'a

  • vue中自定义右键菜单插件

    前言: 作为一个刚刚入门前端的搬砖工作者,写博客只是为了能够记录自己因为业务使用过的一些插件,为了后续更好的使用和改造 本文分享了vue中自定义右键菜单插件的具体代码,供大家参考,具体内容如下 演示 用法 通过npm安装插件 npm i vue-context -S 在main.js中引入并注册 import Vue from 'vue'; import VueContext from 'vue-context'; new Vue({   components: {     VueContext

  • JavaScript 对任意元素,自定义右键菜单的实现方法

    一.一些概念: 1.鼠标事件有一个botton属性:返回一个整数,用于表示点击的是哪个鼠标按键. BUG:在IE和标准DOM的鼠标事件中,唯一一个button属性值相同的是"单击右键"事件,都返回2. 2.事件onmousedown:表示鼠标按键按下的动作. 事件oncontextmenu:点击鼠标触发的另一个事件. 3.中断默认事件处理函数的方法:IE中设置returnValue=false;  标准DOM中调用preventDefault()方法. 4.事件对象:①在IE中,事件对

  • javascript自定义右键弹出菜单实现方法

    本文实例讲述了javascript自定义右键弹出菜单实现方法.分享给大家供大家参考.具体实现方法如下: <head runat="server"> <title>无标题页</title> <script type="text/javascript"> var oPopup = window.createPopup(); function PopMenu(id) { var oPopBody = oPopup.docum

  • vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

    今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerightmenu) 安装  npm install rightmenu --save-dev   开始 //main.js import vue from "vue"; import rightMenu from "rightMenu"; vue.use(rightMenu)

  • javascript鼠标右键菜单自定义效果

    本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta charset="gb2312" /> <title></title> <style> #menu{ border:solid 1px gray; width:100px; display:none; position:absolute; background-

  • Flex自定义右键菜单具体实现

    1.自定义右键菜单注册类: 项目中新增注册类 RightClickManager,代码如下: 复制代码 代码如下: package com.siloon.plugin.rightClick { import flash.display.DisplayObject; import flash.display.InteractiveObject; import flash.events.ContextMenuEvent; import flash.events.MouseEvent; import

  • JS实现的自定义右键菜单实例二则

    本文实例讲述了JS实现的自定义右键菜单.分享给大家供大家参考.具体如下: 示例1: 运行效果截图: 具体代码如下: <!DOCTYPE html> <html> <head> <title>JS实现自定义右键菜单</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src=&

  • jquery实现在网页指定区域显示自定义右键菜单效果

    本文实例讲述了jquery实现在网页指定区域显示自定义右键菜单效果.分享给大家供大家参考.具体如下: 这是一个jquery实现的网页右键菜单效果,与其它自定义的右键菜单不同之处在于,本菜单只在指定区域内才有效,若超出指定区域的话,点击右键后显示的仍是浏览器的右键菜单.运行效果后,请在橘色区域内点击鼠标右键,会弹出一个带图标的自定义右键菜单,和浏览器的右键菜单完全不一样哦! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-ar

  • jQuery实现自定义右键菜单的树状菜单效果

    本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单,而且菜单是自动根据鼠标位置来定位的.当鼠标在菜单以外的任意空白处单击一下后会自动消失.这里想特别说明一点所谓的"菜单以外",可以有两种解剖方式--1.除了鼠标在菜单区域内的所有位置:2.如下图所示的A.B.C.D四个区域.显然用第一种方法来剖析会更简单直接一点.源码中的!IsInArea就

随机推荐