我在小提琴中创建了这个,以显示我在nw.js中要做的事情。这很好用。在运行时动态创建2个选项卡就好了。
我把它移植到我的nw.js并且在调用ace.edit()时发现错误,说它无法找到元素ID。当我在nw.js中查看DOM时,我看到了标签,并且没有在那里创建编辑器。所以问题是选项卡和编辑器div是在jsFiddle中创建的,而不是在nw.js站点中创建的。
是否存在无法在nw.js中向DOM动态添加元素的内容?
$.fn.addEditorTab = function(name, tabName, contents) {
console.log("1");
$('ul', this).append('<li title="' + name + '"><a href="#tab-' + name + '">' + tabName + '</a><span class="ui-icon ui-icon-close" role="presentation"></li>');
$(this).append("<div id='tab-" + name + "'><div id='editor-" + name + "' class='editor'></div></div>");
$(this).tabs("refresh");
console.log("2");
var editor = ace.edit("editor-" + name);
console.log("3");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/lua");
editor.setOptions({
maxLines: Infinity
});
editor.getSession().setValue(contents);
return editor;
};
[编辑] 经过一些更麻烦的事情之后,似乎这只是一个问题,当我在w2ui的面板中有制表符div。
$('#layout').w2layout({
name: 'layout',
panels: [
{ type: 'top', size: 50, style: pstyle, content: 'top', resizable: true },
{ type: 'left', size: 300, style: pstyle, content: '<div id="sidebar" style="height: 100%; width: 100%;"></div>', resizable: true }
//{ type: 'main', style: pstyle, content: '<div id="editor"></div>' }
{ type: 'main', style: pstyle, content: '<div id="tabs"><ul></ul></div>' }
]
});