Я использую jsdifflib (https://github.com/cemerick/jsdifflib#demo) для сравнения текста на моей веб-странице. Я пытаюсь получить отдельную вкладку для каждого результата сравнения с помощью вкладок jquery-UI. Это работает. Но есть большая проблема:
Я сделал следующее изменение кода в diff.js для успешного вывода таблицы в мою переменную:
код от: diff.js
function diffUsingJS(viewType) {
"use strict";
var byId = function (id) { return document.getElementById(id); },
base = difflib.stringAsLines(byId("baseText").value),
newtxt = difflib.stringAsLines(byId("newText").value),
sm = new difflib.SequenceMatcher(base, newtxt),
opcodes = sm.get_opcodes(),
diffoutputResult, //orig diffoutput new:textCmpTabs
//contextSize = byId("contextSize").value; //orig
contextSize = null;
diffoutputResult = diffview.buildView({
baseTextLines: base,
newTextLines: newtxt,
opcodes: opcodes,
baseTextName: "Base Text",
newTextName: "New Text",
contextSize: contextSize,
viewType: viewType
});
return diffoutputResult;
}
мой код jscript:
...
// Dynamic Tabs using jquery UI
function textCmpTabsAddTab(t,c) {
var label = t,
id = 'textCmpTabs-'+label,
li = $( textCmpTabsTmpl.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
tabContentHtml = c;
textCmpTabs.find(".textCmpTabs").append(li);
textCmpTabs.append( '<div id="' + id + '"><p>').append(tabContentHtml).append('</p></div>');
textCmpTabs.tabs( "refresh" );
}
...
...
$( "#sidebyside" ).click(function() {
var diffResult = diffUsingJS(0);
textCmpTabsAddTab(k,diffResult);
k += 1;
}
);
ВОПРОС: ===
Но все таблицы (результаты сравнения) отображаются на всех вкладках. Кажется, в diffview.js есть некоторые команды «document.createElement», которые создают объекты поверх всего документа. Я не уверен, как или почему, или если это что-то еще?
Может кто-нибудь объяснить, как получить результаты каждого матча только в своей вкладке (с пустой вкладкой по умолчанию)?
Спасибо.