jsTree 上下文菜单翻译

Question

我需要翻译 jsTree 中的上下文菜单（当您单击右键时会显示），目前我创建新文件 jstree.contextmenu.pl.js 并从 jquery.jstree.js 复制粘贴一些代码并进行了自己的更改。它有效，但我不确定它是否是最佳选择。

    $.jstree.plugin("contextmenu", {
    __init : function () {
        this.get_container()
            .delegate("a", "contextmenu.jstree", $.proxy(function (e) {
                    e.preventDefault();
                    if(!$(e.currentTarget).hasClass("jstree-loading")) {
                        this.show_contextmenu(e.currentTarget, e.pageX, e.pageY);
                    }
                }, this))
            .delegate("a", "click.jstree", $.proxy(function (e) {
                    if(this.data.contextmenu) {
                        $.vakata.context.hide();
                    }
                }, this))
            .bind("destroy.jstree", $.proxy(function () {
                    // TODO: move this to descruct method
                    if(this.data.contextmenu) {
                        $.vakata.context.hide();
                    }
                }, this));
        $(document).bind("context_hide.vakata", $.proxy(function () { this.data.contextmenu = false; }, this));
    },
    defaults : { 
        select_node : false, // requires UI plugin
        show_at_node : true,
        items : { // Could be a function that should return an object like this one
            "create" : {
                "separator_before"  : false,
                "separator_after"   : true,
                "label"             : "Utwórz nowy",
                "action"            : function (obj) { this.create(obj); }
            },
            "rename" : {
                "separator_before"  : false,
                "separator_after"   : false,
                "label"             : "Zmień nazwę",
                "action"            : function (obj) { this.rename(obj); }
            },
            "remove" : {
                "separator_before"  : false,
                "icon"              : false,
                "separator_after"   : false,
                "label"             : "Usuń",
                "action"            : function (obj) { if(this.is_selected(obj)) { this.remove(); } else { this.remove(obj); } }
            },
            "ccp" : {
                "separator_before"  : true,
                "icon"              : false,
                "separator_after"   : false,
                "label"             : "Edytuj",
                "action"            : false,
                "submenu" : { 
                    "cut" : {
                        "separator_before"  : false,
                        "separator_after"   : false,
                        "label"             : "Wytnij",
                        "action"            : function (obj) { this.cut(obj); }
                    },
                    "copy" : {
                        "separator_before"  : false,
                        "icon"              : false,
                        "separator_after"   : false,
                        "label"             : "Kopiuj",
                        "action"            : function (obj) { this.copy(obj); }
                    },
                    "paste" : {
                        "separator_before"  : false,
                        "icon"              : false,
                        "separator_after"   : false,
                        "label"             : "Wklej",
                        "action"            : function (obj) { this.paste(obj); }
                    }
                }
            }
        }
    },
    _fn : {
        show_contextmenu : function (obj, x, y) {
            obj = this._get_node(obj);
            var s = this.get_settings().contextmenu,
                a = obj.children("a:visible:eq(0)"),
                o = false,
                i = false;
            if(s.select_node && this.data.ui && !this.is_selected(obj)) {
                this.deselect_all();
                this.select_node(obj, true);
            }
            if(s.show_at_node || typeof x === "undefined" || typeof y === "undefined") {
                o = a.offset();
                x = o.left;
                y = o.top + this.data.core.li_height;
            }
            i = obj.data("jstree") && obj.data("jstree").contextmenu ? obj.data("jstree").contextmenu : s.items;
            if($.isFunction(i)) { i = i.call(this, obj); }
            this.data.contextmenu = true;
            $.vakata.context.show(i, a, x, y, this, obj, this._get_settings().core.rtl);
            if(this.data.themes) { $.vakata.context.cnt.attr("class", "jstree-" + this.data.themes.theme + "-context"); }
        }
    }
});

如何正确操作？

Answer 1

由于项目可以是一个函数，现在可以通过以下方式翻译它们：

$('#jstreediv').jstree({
  //...
    'contextmenu': {
        'items': function(n) {
            var tmp = $.jstree.defaults.contextmenu.items();
            tmp.create.label = 'Créer';
            tmp.rename.label = 'Renommer';
            tmp.remove.label = 'Supprimer';
            return tmp;
        }
    }
});

Answer 2

绝对不需要更改定义上下文菜单选项的 jstree。您可以修改特定树实例的菜单，如下所示

    $("#jstreediv").jstree({
    contextmenu:{
    items:{
               "create" : {
                    "separator_before"  : false,
                    "separator_after"   : true,
                    "label"             : "Utwórz nowy",
                    "action"            : function (obj) { this.create(obj); }
                },
                "rename" : {
                    "separator_before"  : false,
                    "separator_after"   : false,
                    "label"             : "Zmień nazwę",
                    "action"            : function (obj) { this.rename(obj); }
                },
                "remove" : {
                    "separator_before"  : false,
                    "icon"              : false,
                    "separator_after"   : false,
                    "label"             : "Usuń",
                    "action"            : function (obj) { 
                                               if(this.is_selected(obj)) {
                                                     this.remove(); 
                                               } 
                                               else {
                                                   this.remove(obj); 
                                               } 
                                           }
               }
      }
  },
  plugins: ["contextmenu"]

});

或者，如果您想将整个上下文菜单配置移动到其他新文件，那么 编写一个返回上下文菜单项的函数，如下所示。

    function yourContextMenu() {

        var items = {
                        "create" : {
                            "separator_before"  : false,
                            "separator_after"   : true,
                            "label"             : "Utwórz nowy",
                            "action"            : function (obj) { this.create(obj); }
                        },
                        "rename" : {
                            "separator_before"  : false,
                            "separator_after"   : false,
                            "label"             : "Zmień nazwę",
                            "action"            : function (obj) { this.rename(obj); }
                        },
                        "remove" : {
                            "separator_before"  : false,
                            "icon"              : false,
                            "separator_after"   : false,
                            "label"             : "Usuń",
                            "action"            : function (obj) { 
                                                       if(this.is_selected(obj)) {
                                                             this.remove(); 
                                                       } 
                                                       else {
                                                           this.remove(obj); 
                                                       } 
                                                   }
                       }
                      //add as many context menu items as you want here
        };

        return items;
}

将此函数保存在 javascript 文件中 somename.js 并将其包含在您的页面中。

<script src="somename.js"></script>

你的树必须如下

$("#jstreediv").jstree({
        contextmenu:{
           items: yourContextMenu()
        },
        plugins: ["contextmenu"]
});