jQuery-contextMenu使用教程

jQuery-contextMenu使用教程

效果如下圖所示。在【右擊菜單】處右擊，會出現下面的效果。

添加引用

    <script src="jQuery-contextMenu-master/dist/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="jQuery-contextMenu-master/dist/jquery.contextMenu.css">
    <script src="jQuery-contextMenu-master/dist/jquery.contextMenu.js"></script>
    <script src="jQuery-contextMenu-master/dist/jquery.ui.position.js"></script>

然后加入下面的代碼

 $(document).ready(function () {
            $.contextMenu({
                selector: "#input1" ,
                callback: function (key, options) {
                    alert(options.selector + "         " + key);
                },
                items: {
                    "log": { name: "查看日志", icon: "edit" },
                    "skip": {
                        name: "跳過此步驟", icon: function () {
                            return 'context-menu-icon context-menu-icon-quit';
                        }
                    },

                    "test1": {
                        name: "馬良測試1", icon: function () {
                            return 'context-menu-icon context-menu-icon-loading';
                        }
                    }


                    ,

                    "test2": {
                        name: "馬良測試1", icon: function () {
                            return 'context-menu-icon context-menu-icon-edit';
                        }
                    }

                    ,

                    "test3": {
                        name: "馬良測試1", icon: function () {
                            return 'context-menu-icon context-menu-icon-delete';
                        }
                    }

                    ,

                    "test4": {
                        name: "馬良測試1", icon: function () {
                            return 'context-menu-icon context-menu-icon-cut';
                        }
                    }

                    ,

                    "test5": {
                        name: "馬良測試1", icon: function () {
                            return 'context-menu-icon context-menu-icon-add';
                        }
                    }

                    ,

                    "test6": {
                        name: "馬良測試1", icon: function () {
                            return 'context-menu-icon context-menu-icon-copy';
                        }
                    }
                }
            });
        })

點擊下載