jQuery模拟电脑桌面右键菜单插件



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

16 61 21



特效描述:模拟电脑桌面 右键菜单。jQuery右键菜单插件NZ_Menu示例页面。支持带文本图标,触发事件鼠标右键打开菜单效果。这是一款简单实用的电脑桌面右键菜单实例代码。

代码结构

1. 引入CSS

<link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<link href="js/NZ-Plugin/Css/NZ-Menu.min.css" rel="stylesheet" />
<link href="css/displaystyle.css" rel="stylesheet" />
<link href="js/syntaxhighlighter_3.0.83/styles/shCoreRDark.css" rel="stylesheet" />

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/NZ-Plugin/Js/NZ-Menu.min.js"></script>
<script src="js/syntaxhighlighter_3.0.83/shCore.js"></script>
<script src="js/syntaxhighlighter_3.0.83/shBrushJScript.js"></script>

3. HTML代码

    <h2 class="pagetitle">NZ-Menu</h2>
    <ul class="conlist">
        <li>
            <div class="contitle">基本应用</div>
            <ul>
                <li>
                    <h3>使用方法</h3>
                    <div class="demo-panel" id="aaa">右击点我</div>
                    <h5>演示代码:</h5>
                    <pre class="brush:js">
                        $("#aaa").NZ_Menu({
                                items: [{
                                    name: "复制", event: aas
                                }, {
                                name: "粘贴", event: function () {
                                    alert("粘贴");
                                }
                                }, {
                                    name: "粘贴", event: function () {
                                        alert("粘贴");
                                    }
                                }, {
                                    name: "粘贴", event: function () {
                                        alert("粘贴");
                                }, {
                                    name: "This item is Test", event: function () {
                                }
                                }
                            }]
                        });
                        function aas() {
                            alert("复制");
                        }
                    </pre>
                </li>
                <li>
                    <h3>带图标</h3>
                    <div class="demo-panel" id="bbb">右击点我</div>
                    <h5>演示代码:</h5>
                    <pre class="brush:js">
                        $("#bbb").NZ_Menu({
                            items: [{
                                name: "用户", event: aas, icon: "fa-user"
                            }, {
                                name: "通讯录", event: function () {
                                }, icon: "fa-address-book"
                            }, {
                                name: "打车平台", event: function () {
                                }, icon: "fa-bus"
                            }, {
                                name: "文件系统", event: function () {
                                }, icon: "fa-file"
                            }]
                        });
                    </pre>
                </li>
                <li>
                    <h3>触发事件</h3>
                    <div class="demo-panel" id="ccc">右击点我</div>
                    <h5>演示代码:</h5>
                    <pre class="brush:js">
                        $("#ccc").NZ_Menu({
                            items: [{ name: "测试", icon: "fa-vial" }]
                            , showbefore: function () {
                                alert("打开前!");
                            }, showafter: function () {
                                alert("打开后!");
                            }, closed: function () {
                                alert("关闭了!");
                            }
                        });
                    </pre>
                </li>
                <li>
                    <h3>参数说明</h3>
                    <h5>演示代码:</h5>
                    <pre class="brush:js">
                        {
                            items: [],//选项构成:{icon:"",name:"",classlist:[],event:function() {}}
                            fatype: "fas",//fontawesome的图标类型fas/far
                            bgcolor: "#fff",
                            showbefore: null,//菜单创建前事件
                            showafter: null,//菜单创建后事件
                            closed:null//关闭事件
                        };
                    </pre>
                </li>
            </ul>
        </li>
    </ul>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 页面 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到