NZ-Menu

• 基本应用

  • 使用方法

    右击点我

    演示代码：

                            $("#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("复制");
                            }
                        

  • 带图标

    右击点我

    演示代码：

                            $("#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"
                                }]
                            });
                        

  • 触发事件

    右击点我

    演示代码：

                            $("#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"
                                }]
                            });
                        

  • 二级菜单（新版本2.8.0）

    右击点我
    注：虽命名是二级菜单，实际理论上支持无级菜单，即多级菜单，可自行测试。

    演示代码：

                            $("#ddd").NZ_Menu({
                                items: [{
                                    name: "复制"
                                    , icon: "fa-copy"
                                }, {
                                    name: "粘贴"
                                    , icon: "fa-paste"
                                }, {
                                    name: "添加"
                                    , icon: "fa-plus"
                                    , event: function () { alert("替换"); }
                                    , menu: [
                                        {
                                            name: "文件夹",
                                            event: function () {
                                                alert("这是文件夹");
                                            }
                                        },
                                        {
                                            name: "Execl"
                                        },
                                        {
                                            name: "记事本"
                                        }
                                    ]
                                }, {
                                    name: "刷新"
                                    , icon: "fa-redo-alt"
                                }, {
                                    name: "下载"
                                    , icon: "fa-download"
                                    , event: function () { }
                                    , menu: [
                                        { name: "黄金圣斗士" }, { name: "迪迦奥特曼" }, { name: "天线宝宝" }
                                    ]
                                }, {
                                    name: "通讯录", event: function () {
                                    }, icon: "fa-address-book"
                                }
                                ]
                            });
                        

  • 自定义图片图标（新版本2.8.0）

    右击点我

    演示代码：

                            $("#eee").NZ_Menu({
                                items: [{
                                    name: "复制-图片图标"
                                    , imgicon: "../../images/icon/copy.png"
                                }, {
                                    name: "粘贴"
                                    , icon: "fa-paste"
                                }, {
                                    name: "刷新-图片图标"
                                    , imgicon: "../../images/icon/refresh.png"
                                }, {
                                    name: "下载-图片图标"
                                    , imgicon: "../../images/icon/download.png"
                                    , event: function () { }
                                    , menu: [
                                        { name: "黄金圣斗士" }, { name: "迪迦奥特曼" }, { name: "天线宝宝" }
                                    ]
                                }, {
                                    name: "通讯录", event: function () {
                                    }, icon: "fa-address-book"
                                }
                                ]
                            });
                        

  • 参数说明

    演示代码：

                            {
                                items: [],//选项构成：{icon:"",name:"",menu:[{icon:"",name:"",classlist:[],event:function(){}}],classlist:[],event:function() {}}
                                fatype: "fas",//fontawesome的图标类型fas/far
                                bgcolor: "#fff",
                                showbefore: null,//菜单创建前事件
                                showafter: null//菜单创建后事件
                            };