Использование jQuery для украшения чужого HTML
У меня есть стороннее приложение, которое создает отчеты на основе HTML, которые мне нужно отображать. У меня есть немного контроль над тем, как они выглядят, но в целом это довольно примитивно. Однако я может вставляю некоторый javascript. Я хотел бы попытаться добавить в него немного добра jQuery, чтобы немного его привести в порядок. Одна конкретная вещь, которую я хотел бы сделать, - это взять таблицу (фактический HTML <table>), которая всегда содержит одну строку и переменное количество столбцов, и волшебным образом преобразовать ее в представление с вкладками, где содержимое (всегда один <div>, который При необходимости я могу предоставить идентификатор каждой исходной ячейки таблицы, представляющей лист в представлении с вкладками. Я не нашел хороших (читай: простых) примеров повторного воспитания детей, подобных этому, поэтому я не уверен, с чего начать. Может кто-нибудь подсказать, как я могу это попробовать?
Ответы 6
Вы можете сделать это с помощью jQuery, но это может превратить дополнительное обслуживание в кошмар. Я бы не рекомендовал делать это / очистку экрана, потому что, если источник когда-либо изменится, ваша работа изменится.
Это, безусловно, кажется возможным. С помощью комбинации jQuery.append и jQuery.fadeIn и fadeOut вы сможете создать симпатичный маленький элемент управления с вкладками.
См. В JQuery UI / Tabs простой способ создания набора вкладок на основе элемента <ul> и набора <div>'s: http://docs.jquery.com/UI/Tabs
Учитывая такую html-страницу:
<body><br/>
<table id = "my-table">`<br/>
<tr><br/>
<td><div>This is the contents of Column One</div></td><br/>
<td><div>This is the contents of Column Two</div></td><br/>
<td><div>This is the contents of Column Three</div></td><br/>
<td><div>Contents of Column Four blah blah</div></td><br/>
<td><div>Column Five is here</div></td><br/>
</tr><br/>
</table><br/>
</body><br/>
следующий код jQuery преобразует ячейки таблицы в вкладки (проверено в FF 3 и IE 7)
$(document).ready(function() {
var tabCounter = 1;
$("#my-table").after("<div id='tab-container' class='flora'><ul id='tab-list'></ul></div>");
$("#my-table div").appendTo("#tab-container").each(function() {
var id = "fragment-" + tabCounter;
$(this).attr("id", id);
$("#tab-list").append("<li><span><a href='#" + id + "'>Tab " + tabCounter + "</a></span></li>");
tabCounter++;
});
$("#tab-container > ul").tabs();
});
Чтобы заставить это работать, я сослался на следующие файлы jQuery
- jquery-latest.js
- ui.core.js
- ui.tabs.js
И я сослался на таблицу стилей флора.all.css. В основном я скопировал раздел заголовка из Пример вкладки jQuery
Я также предлагаю ввести дополнительную таблицу стилей и использовать ее для отображения / скрытия и стилизации уродливых элементов.
Похоже, вас интересует не очистка HTML, как HTML Tidy, а интерактивное улучшение статических компонентов HTML (например, превращение статической таблицы в интерфейс с вкладками).
Некоторые ответы здесь уже давали вам подсказки, например используя вкладки JQuery, но мне не нравится подход переписывания HTML в их ответах.
IMHO, лучше извлекать содержимое ячеек таблицы, которое вы хотите, с помощью селектора JQuery, например:
var mycontent = $('table tr[:first-child]').find('td[:first-child]').html()
затем вы можете передать эти данные в плагин JQuery UI, программно создавая вкладки:
$('body').append($('<div></div>').attr('id','mytabs'));
$('#mytabs').tabs({}); //specify tab preferences here
$('#mytabs').tabs('add',mycontent);
Украшение HTML - не такой простой процесс, потому что каждый разрыв строки между тегами является текстовым узлом, а произвольное украшение создает и удаляет текстовые узлы таким образом, который может нанести вред структуре документа и, вероятно, нанести вред содержимому. Я рекомендую использовать программу, которая уже продумала все эти условия, например http://prettydiff.com/?m=beautify
Что ж, я знаю, что могу внедрить определенные атрибуты идентификатора в определенные элементы страницы, которые будут отображаться, и что в противном случае источник HTML вряд ли изменится каким-либо значимым образом. У вас есть хороший аргумент, но я думаю, что с этим конкретным сторонним приложением этот аспект относительно безопасен.