Использование jQuery для украшения чужого HTML

StackOverflow https://stackoverflow.com/questions/54138

  •  09-06-2019
  •  | 
  •  

Вопрос

У меня есть стороннее приложение, которое создает отчеты на основе HTML, которые мне нужно отображать.У меня есть некоторый контроль над тем, как они выглядят, но в целом это довольно примитивно.я может хотя добавьте немного javascript.Я хотел бы попытаться привнести в него немного пользы от jQuery, чтобы привести его в порядок.Одна конкретная вещь, которую я хотел бы сделать, — это взять таблицу (настоящий HTML <table>), которая всегда содержит одну строку и переменное количество столбцов, и волшебным образом преобразовать ее в представление с вкладками, где содержимое (всегда один <div>, который При необходимости я могу предоставить идентификатор) каждой исходной ячейки таблицы представляет лист в представлении с вкладками.Ничего хорошего я не нашел (читай:простые) примеры таких элементов повторного родительского контроля, поэтому я не уверен, с чего начать.Может ли кто-нибудь дать несколько советов о том, как я могу это попробовать?

Это было полезно?

Решение

Учитывая такую ​​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

И я сослался на таблицу стилей Flora.all.css.По сути, я скопировал раздел заголовка из Пример вкладки jQuery

Другие советы

Вы можете сделать это с помощью jQuery, но это может превратить дополнительное обслуживание в кошмар.Я бы рекомендовал не делать этого/очистку экрана, потому что, если источник когда-либо изменится, изменится и ваша работа.

Это, конечно, звучит возможно.С помощью комбинации jQuery.append, jQuery.fadeIn и FadeOut вы сможете создать красивый небольшой элемент управления с вкладками.

См. JQuery UI/Tabs, чтобы узнать простой способ создания набора вкладок на основе <ul> элемент и набор <div>'s: http://docs.jquery.com/UI/Tabs

Я бы также предложил добавить дополнительную таблицу стилей и использовать ее для отображения/скрытия и стилизации уродливых элементов.

Украшение HTML — не такой уж простой процесс, поскольку каждый разрыв строки между тегами представляет собой текстовый узел, а произвольное украшение создает и удаляет текстовые узлы таким образом, что это может нанести вред структуре документа и, вероятно, нанести вред содержимому.Рекомендую использовать программу, которая уже продумала все эти условия, например http://prettydiff.com/?m=beautify

Похоже, вас интересует не очистка HTML, как это делает HTML Tidy, а интерактивное улучшение статических компонентов HTML (например,поворот статической таблицы в интерфейсе с вкладками).

Некоторые ответы здесь уже дали вам подсказки, например.используя вкладки Jquery, но мне не нравится подход к переписыванию HTML в их ответах.

ИМХО, лучше извлечь содержимое нужных ячеек таблицы с помощью селектора 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);
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top