精华内容
下载资源
问答
  • js自定义右键菜单

    2014-12-19 11:11:00
    js自定义右键菜单
  • js自定义右键菜单是一款在网页中右击鼠标,弹窗类似windows桌面上鼠标右击效果,空白处点击右键会有相应的内容弹出。 js自定义右键菜单效果图一: 点击查看演示
  • js自定义右键菜单.zip

    2019-07-04 00:03:39
    js自定义右键菜单是一款在网页中右击鼠标,弹窗类似windows桌面上鼠标右击效果,空白处点击右键会有相应的内容弹出。 js自定义右键菜单效果图一: 点击查看演示 js自定义右键菜单效果图二:
  • 主要介绍了JS自定义右键菜单实现代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 插件描述:纯js编写,自定义右键菜单,支持图标、快捷键、支持配置型样式(json对象形式配置)和引入型样式(style标签中定义的样式或外部样式表样式)版本修改:(2015-4-9) 针对纯js自定义右键菜单插件在ie浏览器、火狐...

    cc71e06c11a95bb35e44c2bb91cb2095.png

    3efc3516b7ecb765a1f067c294640f12.png

    插件描述:纯js编写,自定义右键菜单,支持图标、快捷键、支持配置型样式(json对象形式配置)和引入型样式(style标签中定义的样式或外部样式表样式)

    版本修改:(2015-4-9) 针对纯js自定义右键菜单插件在ie浏览器、火狐浏览器的部分bug修改,目前已能够全面兼容chrome、Firefox、safari、ie5及以上版本。。。。

    body, div, span, h2 {

    margin: 0;

    padding: 0;

    }

    body {

    background: url("imgs/bg.jpg");

    background-position: center;

    background-size: cover;

    }

    .box {

    width: 1000px;

    height: 800px;

    margin: 20px auto;

    border-radius: 10px;

    background: #EDEDED;

    box-shadow: #000 0 0 15px inset;

    -webkit-box-shadow: #000 0 0 15px inset;

    -moz-box-shadow: #000 0 0 15px inset;

    -o-box-shadow: #000 0 0 15px inset;

    padding: 20px;

    color: #ccc;

    font-size: 36px;

    font-weight: bolder;

    }

    /****使用外链样式配置右键菜单*****/

    .kinerMenuBox {

    width: 200px;

    background: #FEFEFE;

    border: solid 1px #444444;

    cursor: pointer;

    border-radius: 10px;

    overflow: hidden;

    box-shadow:1px 1px 5px #000, -1px -1px 5px #fff;

    -webkit-box-shadow: 1px 1px 5px #000,-1px -1px 5px #fff;

    -moz-box-shadow: 1px 1px 5px #000,-1px -1px 5px #fff;

    -o-box-shadow: 1px 1px 5px #000,-1px -1px 5px #fff;

    font-size: 16px;

    position: absolute;

    }

    .kinerMenuBox .kinerMenuTitle {

    background: #DDDDDD;

    padding: 10px 5px;

    border-bottom: inset #444444 1px;

    cursor: default

    }

    .kinerMenuBox .kinerMenuTitle .kinerMenuTitleIcon {

    width: 30px;

    height: 30px

    }

    .kinerMenuBox .kinerMenuTitle .kinerMenuTitleCon {

    height: 30px;

    line-height: 30px;

    padding-left: 10px;

    color: #444444;

    font-size: 18px;

    display: inline-block;

    vertical-align: top

    }

    .kinerMenuBox .kinerMenuItem {

    background: #FFF;

    padding: 5px 5px;

    }

    .kinerMenuBox .kinerMenuItem:hover {

    background: #CCC;

    }

    .kinerMenuBox .kinerMenuItem .kinerMenuItemIcon {

    display: inline-block;

    width: 30px;

    height: 30px

    }

    .kinerMenuBox .kinerMenuItem .kinerMenuItemCon {

    height: 30px;

    line-height: 30px;

    padding-left: 10px;

    position: relative;

    color: #444444;

    font-size: 16px;

    display: inline-block;

    vertical-align: top

    }

    .kinerMenuBox .kinerSeparator {

    width: 100%;

    height: 1px;

    border-bottom: dashed 1px #444444;

    /*background: #444444*/

    border-left: none;

    border-right: none

    }

    .kinerMenuBox .kinerKeyMap {

    margin-right: 5px;

    right: 10px;

    position: absolute;

    color: #444444;

    height: 30px;

    line-height: 30px;

    display: inline-block;

    }

    window.onload = function () {

    console.log(contextMenu);

    var menu = new contextMenu({

    target: document.getElementById("box"),//开启自定义右键菜单的目标,

    hasIcon: true,//是否需要图标

    hasTitle: true,//是否需要标题

    autoHide:true,//是否自动隐藏右键菜单

    linkClass: true,//是否使用外链样式,如果为true,则配置样式失效;若选择false且同时设置css样式,则配置样式与css样式按优先级呈现;若选false,则可不用配置classes属性

    menu: {//菜单数据配置

    title: {//标题配置

    icon: "imgs/em_01.png",//标题图标路径

    content: "菜单标题"//标题内容

    },

    items: [//菜单项配置

    {

    icon: "imgs/em_02.png",//菜单项图标路径

    content: "菜单项1",//菜单项内容

    action: function (e, item) {//菜单项单击和快捷键触发事件

    alert(item.content);

    },

    keymap: "alt+1"//快捷键(目前只支持:ctrl+ alt+ shift+ )

    },

    "-",//代表分隔符

    {

    icon: "imgs/em_04.png",

    content: "菜单项2",

    action: function (e, item) {

    alert("====>" + item.content);

    },

    keymap: "alt+2"

    },

    {

    icon: "imgs/em_05.png",

    content: "菜单项3",

    action: function (e, item) {

    alert("====>" + item.content);

    },

    keymap: "ctrl+j"

    },

    {

    icon: "imgs/em_06.png",

    content: "菜单项4",

    action: function (e, item) {

    alert("====>" + item.content);

    },

    keymap: "shift+y"

    },

    "-",

    {

    icon: "",

    content: "菜单项5",

    action: function (e, item) {

    console.log(e, item,this);

    }

    },

    {

    icon: "imgs/em_07.png",

    content: "菜单项6",

    action: function (e, item) {

    alert("====>" + item.content);

    }

    },

    {

    icon: "imgs/em_09.png",

    content: "菜单项7",

    action: function (e, item) {

    alert("====>" + item.content);

    }

    }

    ]

    },

    classes: {//对有菜单的样式控制

    menuBox: {//右键菜单的样式

    "width": "200px",

    "background": "#FEFEFE",

    "border": "solid 1px #333",

    "cursor": "pointer",

    "border-radius": "10px",

    "overflow": "hidden",

    "box-shadow": "-1px -1px 5px #000,1px 1px 5px #ccc",

    "-webkit-box-shadow": "-1px -1px 5px #000,1px 1px 5px #ccc",

    "-moz-box-shadow": "-1px -1px 5px #000,1px 1px 5px #ccc",

    "-o-box-shadow": "-1px -1px 5px #000,1px 1px 5px #ccc",

    "font-size": "16px"

    },

    menuTitle: {//菜单标题的样式

    self: {//标题整体样式

    "background": "#DDDDDD",

    "padding": "10px 5px",

    "border-bottom": "inset #000 1px",

    "cursor": "default"

    },

    icon: {//标题图标样式

    width: "30px",

    height: "30px"

    },

    content: {//标题内容样式

    height: "30px",

    "line-height": "30px",

    "padding-left": "10px",

    "color": "#333333",

    "font-size": "18px",

    "display": "inline-block",

    "vertical-align": "top"

    }

    },

    item: {//菜单项样式控制

    self: {//菜单项整体样式控制

    "background": "#FFF",

    "padding": "5px 5px"

    },

    icon: {//菜单项图标样式

    width: "30px",

    height: "30px"

    },

    content: {//菜单项内容样式

    height: "30px",

    "line-height": "30px",

    "padding-left": "10px",

    "color": "#333333",

    "font-size": "16px",

    "display": "inline-block",

    "vertical-align": "top"

    },

    hover: {//菜单项鼠标移入样式

    background: "#ccc"

    },

    keymap: {//快捷键县市区样式

    "margin-right": "5px",

    "color": "blue"

    }

    },

    separator: {//分隔符样式

    width: "100%",

    height: "1px",

    border: "solid 1px #000",

    "border-left": "none",

    "border-right": "none"

    }

    }

    });

    };

    style="-moz-user-select:none;-webkit-user-select:none; cursor: default;">

    请对着白色区域右键单击....
    (或使用快捷键【 alt+1 , alt+2 , ctrl+j , shift+y 】)

    展开全文
  • JS自定义右键菜单

    2013-07-31 13:05:36
    比较通用的自定义菜单小控件 最多支持2级菜单 使用起来很方便
  • 要求:点击页面鼠标右键,阻止默认右键菜单的弹出,并弹出自定义右键菜单。 效果示例: 参考代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> ...

    要求:点击页面鼠标右键,阻止默认右键菜单的弹出,并弹出自定义右键菜单。

    效果示例:

     

    参考代码:

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <title>习题</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }
    
            #div1 {
                position: absolute;
                width: 80px;
                background: #ccc;
            }
        </style>
        <script>
    
            window.onload = function () {
                //此处写代码
                var oDiv=document.getElementById('div1');
                oDiv.style.display='none';
                document.oncontextmenu=function(ev){
                    var oEvent=event||ev;     
                    oDiv.style.display='block';    
                    oDiv.style.left=oEvent.clientX+'px';
                    oDiv.style.top=oEvent.clientY+'px';
                    return false;
                }
                document.onclick=function(){
                    oDiv.style.display='none';  
                }
            }
        </script>
    </head>
    
    <body>
        <div id='div1'>
            <ul>
                <li>aaa</li>
                <li>bbb</li>
                <li>ccc</li>
            </ul>
        </div>
    </body>
    </html>

     

     

    转载于:https://www.cnblogs.com/f6056/p/11045427.html

    展开全文
  • 自定义右键菜单——复制到粘贴板 需求: 鼠标在li标签上点击右键出现菜单,主要是复制等功能 屏蔽浏览器默认右键点击事件 右键菜单出现在鼠标点击的位置 点击屏幕其他位置菜单消失 点击之后有回调 实现: ...

    ##自定义右键菜单——复制到粘贴板
    ####需求:

    1. 鼠标在li标签上点击右键出现菜单,主要是复制等功能

    2. 屏蔽浏览器默认右键点击事件

    3. 右键菜单出现在鼠标点击的位置

    4. 点击屏幕其他位置菜单消失

    5. 点击之后有回调
      ###实现:
      ####1、使用jQuery - 右键菜单插件contextMenu

    6. 在项目中引入jquery.contextMenu.jsjquery.contextMenu.css
      同时 contextMenu 依赖 jQuery。

    7. 初始化插件

       $.contextMenu({
           selector: 'li',
           callback: function(key, options) {
               var Url2 = $(this).text().trim();
               var oInput = document.createElement('input');
               oInput.value = Url2;
               document.body.appendChild(oInput);
               oInput.select(); // 选择对象
               document.execCommand("Copy"); // 执行浏览器复制命令
               oInput.className = 'oInput';
               oInput.style.display = 'none';
               alert('成功复制到粘贴板');
           },
           items: {
               "copy": { name: "复制", icon: "copy" },
           }
       });
      

    搞定!成功复制到粘贴板。
    #####contextMenu插件:GitHub 主页
    #####contextMenu插件:使用方法
    ####2、使用原生js手撸一个
    直接上代码:
    #####html:



    • 复制

    • 删除



    #####CSS:
    * {
    margin: 0;
    padding: 0;
    }

        #Rmenu {
            width: 80px;
            background: #00AAAA;
            position: absolute;
            display: none;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            -moz-box-shadow: 2px 2px 20px #333333;
            -webkit-box-shadow: 2px 2px 20px #333333;
            box-shadow: 2px 2px 20px #333333;
        }
        
        #Rmenu ul li:hover {
            font-size: 17px;
            background-color: #E1B700;
        }
        
        #Rmenu ul li {
            border-radius: 5px;
            list-style: none;
            margin: 5px;
            font-size: 16px;
        }
    

    #####JS
    window.onload = function() {
    var menu = document.getElementById(“Rmenu”);
    document.oncontextmenu = function(ev) {
    var ev = ev || event;
    menu.style.display = “block”;
    menu.style.left = ev.clientX + “px”;
    menu.style.top = ev.clientY + “px”;
    //阻止默认右键事件
    return false;
    }
    document.onclick = function(e) {
    //click事件可以关闭右键菜单
    if (e.target.tagName.toLowerCase() === ‘li’) {
    console.log(“您点击的是:” + e.target.outerText);
    }
    menu.style.display = “none”; 
    }
    }
    结果:


    新博客地址:http://www.caomage.com

    展开全文
  • 自定义右键菜单极简壁纸2.0 地址: https://bz.zzzmh.cn 目前进度已开发到95%近期有时间就会分享一下,我在开发过程中用到的一些小技术的简单用法和demo关于html js右键菜单原理非常简单,监听鼠标右键事件,在事件中...

    9e9ed541689f

    自定义右键菜单

    极简壁纸2.0 地址: https://bz.zzzmh.cn 目前进度已开发到95%

    近期有时间就会分享一下,我在开发过程中用到的一些小技术的简单用法和demo

    关于html js右键菜单

    原理非常简单,监听鼠标右键事件,在事件中执行ev.preventDefault()就可以屏蔽原本的浏览器默认右键菜单,代码如下。

    window.oncontextmenu = function (ev) {

    ev.preventDefault();

    }

    然后从鼠标当前位置,画一个自定义的右键菜单div,就可以实现一个简单的自定义右键菜单了。

    • 下载
    • 删除
    • 移动到...
    • 重命名

    // 先用e兼容不同浏览器

    let e = ev || event

    /阻止默认行为

    e.preventDefault();

    //记录当前的坐标(x轴和y轴)

    let x = e.clientX;

    let y = e.clientY;

    // 显示邮件菜单

    let menu = document.querySelector('#list');

    menu.style.left = x + 'px';

    menu.style.top = y + 'px';

    menu.style.display = 'block';

    百度到的例子就是这些,后面我再说补充下我的改进

    默认右键菜单是出现在鼠标所在位置的右下方,但是右下方的空间不一定足够显示右键菜单,如果右边不够自动转成左边,下面不够转上面,这部分代码如下。

    const clientWidth = document.documentElement.clientWidth;

    const clientHeight = document.documentElement.clientHeight;

    if (e.clientY > 40) {

    if (clientHeight - e.pageY >= menu.offsetHeight) {

    menu.style.top = e.pageY + 'px';

    } else {

    menu.style.top = (e.pageY - menu.offsetHeight) + 'px';

    }

    if (clientWidth - e.pageX >= menu.offsetWidth) {

    menu.style.left = e.pageX + 'px';

    } else {

    menu.style.left = (e.pageX - menu.offsetWidth) + 'px';

    }

    menu.style.display = 'block';

    }

    可以通过ev.target来获取到右击的目标的元素,从而实现不同元素不同右键菜单

    目标1右击出现右键菜单1
    目标2右击出现右键菜单2
    • 下载
    • 删除
    • 移动到...
    • 重命名
    • 查看
    • 关于
    • 刷新
    • 反馈

    // 先用e兼容不同浏览器

    let e = ev || event

    // 判断data-type参数来获取不同的右键菜单用于显示

    if (e.target && e.target.getAttribute('data-type') == 'target1') {

    menu = document.querySelector('#list1');

    } else if (e.target && e.target.getAttribute('data-type') == 'target2') {

    menu = document.querySelector('#list2');

    }

    任意鼠标点击事件都要隐藏掉正在显示中的右键菜单,否则用户不选择菜单内容,而是继续操作其他区域的话,菜单会一直悬浮在那边。

    window.onclick = function () {

    menu.style.display = 'none';//再次点击时隐藏菜单框

    }

    END

    目前就是这些,之后还会分享一些开发极简壁纸时学到的技术。

    也欢迎访问极简壁纸2.0 地址: https://bz.zzzmh.cn

    展开全文
  • 主要为大家详细介绍了js实现自定义右键菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文实例为大家分享了右键自定义菜单的具体代码,供大家参考,具体内容如下#menu {height: 200px;width: 50px;border: 1px solid gray;background-color: antiquewhite;padding: 10px;display: none;position: ...
  • 本文实例为大家分享了js实现右键菜单的具体代码,供大家参考,具体内容如下原理:1.屏蔽默认的右键菜单2.点击右键获取位置,让自定义菜单到点击位置上3.点击左键,自定义菜单消失代码如下右键菜单练习*{margin: 0;/*...
  • 主要介绍了JS实现的自定义右键菜单,以两则实例形式分析了javascript自定义右键菜单效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • 本篇文章主要介绍了JS简单实现自定义右键菜单实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • RT,一个简单的例子,仅仅讲述原理假设我要把上面这个div设置为右键菜单,先随意美化一下。原理就是利用contextmenu事件,右键点击时,会触发这个事件时,该事件对象可以获得鼠标距离页面左上角的距离clientX和...
  • 简单源生JS实现自定义右键菜单效果

    千次阅读 2017-05-17 22:40:35
    简单源生JS实现自定义右键菜单效果
  • 来自 和派孔明——高级前端工程师 * {margin:0; padding:0; list-style:none;} #ul1 li {width:400px; background:#CCC; border:1px solid black; margin:10px; float:left; line-height:30px;...#menu {w
  • js自定义右键菜单

    2018-08-14 18:06:00
    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">...自定义右键菜单</title> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 381
精华内容 152
关键字:

js自定义右键菜单