Usando jQuery para embelezar o HTML de outra pessoa

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

  •  09-06-2019
  •  | 
  •  

Pergunta

Tenho um aplicativo de terceiros que cria relatórios baseados em HTML que preciso exibir.Eu tenho alguns controle sobre sua aparência, mas em geral é bastante primitivo.EU pode injete algum javascript, no entanto.Eu gostaria de tentar injetar um pouco de jQuery nele para arrumar um pouco.Uma coisa específica que eu gostaria de fazer é pegar uma tabela (uma <table> HTML real) que sempre contenha uma linha e um número variável de colunas e convertê-la magicamente em uma visualização com guias onde o conteúdo (sempre um <div> que Posso fornecer um ID, se necessário) de cada célula da tabela original representa uma planilha na visualização com guias.Não encontrei nada de bom (leia:simples) exemplos de itens de re-parentalidade como este, então não sei por onde começar.Alguém pode fornecer algumas dicas sobre como posso tentar isso?

Foi útil?

Solução

Dada uma página HTML como esta:

<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/>

o seguinte código jQuery converte as células da tabela em guias (testado em FF 3 e 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();
});

Para fazer isso funcionar, referenciei os seguintes arquivos jQuery

  • jquery-mais recente.js
  • ui.core.js
  • ui.tabs.js

E referenciei a folha de estilo flora.all.css.Basicamente, copiei a seção do cabeçalho do exemplo de guia jQuery

Outras dicas

Você poderia fazer isso com jQuery, mas isso pode tornar a manutenção adicional um pesadelo.Eu não recomendaria fazer isso / captura de tela porque, se a fonte mudar, o mesmo acontecerá com sua solução.

Isso certamente parece possível.Com uma combinação de jQuery.append e jQuery.fadeIn e fadeOut você poderá criar um pequeno controle com guias.

Consulte JQuery UI/Tabs para obter uma maneira simples de criar um conjunto de guias com base em um <ul> elemento e um conjunto de <div>'s: http://docs.jquery.com/UI/Tabs

Eu também sugeriria injetar uma folha de estilo adicional e usá-la para mostrar/ocultar e estilizar elementos feios.

Embelezar HTML não é um processo tão simples, porque cada quebra de linha entre tags é um nó de texto e o embelezamento arbitrário cria e remove nós de texto de uma maneira que pode ser prejudicial à estrutura do documento e provavelmente prejudicial ao conteúdo.Eu recomendo usar um programa que já tenha pensado em todas essas condições, como http://prettydiff.com/?m=beautify

Parece que você não está interessado em uma limpeza de HTML como o HTML Tidy faz, mas em um aprimoramento interativo de componentes HTML estáticos (por exemplo,transformando uma tabela estática em uma interface com guias).

Algumas respostas aqui já deram dicas, por ex.usando Jquery Tabs, mas não gosto da abordagem de reescrita de HTML em suas respostas.

IMHO é melhor extrair o conteúdo das células da tabela desejadas com um seletor JQuery, como: 

var mycontent = $('table tr[:first-child]').find('td[:first-child]').html()

então você pode alimentar esses dados para o plugin JQuery UI criando programaticamente as guias:

$('body').append($('<div></div>').attr('id','mytabs'));
$('#mytabs').tabs({}); //specify tab preferences here
$('#mytabs').tabs('add',mycontent);
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top