我需要翻译jsTree中的contextmenu（当你点击右键时显示），此时我创建新文件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"); }
}
}
});
怎么做得对？
答案 0 :(得分：8)
由于项目可以是一个功能，现在可以通过以下方式完成翻译：
$('#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;
}
}
});
答案 1 :(得分：3)
绝对不需要更改定义上下文菜单选项的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"]
});
或者，如果您想将整个上下文菜单配置移动到其他新文件，那么 编写一个返回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"]
});