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

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

2 голосов
/ 10 сентября 2008

У меня есть стороннее приложение, которое создает отчеты на основе HTML, которые мне нужно отображать. У меня есть некоторый контроль над тем, как они выглядят, но в целом это довольно примитивно. Однако я могу добавить какой-нибудь javascript. Я хотел бы попытаться внести в него некоторые достоинства jQuery, чтобы привести их в порядок. Одна конкретная вещь, которую я хотел бы сделать, это взять таблицу (фактический HTML

Ответы [ 6 ]

4 голосов
/ 17 сентября 2008

Учитывая 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 на вкладке

0 голосов
/ 26 ноября 2011

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

0 голосов
/ 07 июля 2009

Похоже, вы не заинтересованы в очистке 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);
0 голосов
/ 21 мая 2009

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

0 голосов
/ 10 сентября 2008

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

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

0 голосов
/ 10 сентября 2008

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...