Utilizzo di jQuery per abbellire qualcun altro html

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

  •  09-06-2019
  •  | 
  •  

Domanda

Ho un app di terze parti che crea basata su HTML di report che si desidera visualizzare.Ho alcuni controllo su come il loro aspetto, ma in generale è piuttosto primitiva.Io può iniettare un po ' di javascript, però.Mi piacerebbe provare a iniettare un po 'di jQuery bontà in esso per riordinare un po'.Uno specifico cosa che vorrei fare è prendere un tavolo (un effettivo HTML <table>) che contiene sempre una riga e un numero variabile di colonne e magicamente convertirla in una visualizzazione a schede in cui il contenuto (sempre uno <div> che sono in grado di fornire un ID se necessario) di ogni cella della tabella rappresenta un foglio della tabbed view.Non ho trovato nessuna buona (leggi:semplici esempi di ri-genitorialità articoli come questo, quindi non sono sicuro da dove cominciare.Qualcuno può fornire alcuni suggerimenti su come potrei provare anche questo?

È stato utile?

Soluzione

Data una pagina html come questo:

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

il seguente codice jQuery converte le celle della tabella in schede (testato in 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();
});

Per ottenere questo lavoro ho fatto riferimento il seguente file di jQuery

  • jquery-latest.js
  • ui.core.js
  • ui.tabs.js

E ho fatto riferimento alla flora.tutti.foglio di stile css.In pratica ho copiato la sezione di intestazione dal jQuery scheda esempio

Altri suggerimenti

Si potrebbe fare questo con jQuery ma può fare una manutenzione aggiuntiva di un incubo.Vorrei raccomandare contro facendo questo / screen scraping, perché se la fonte cambia così fa il tuo lavoro in tutto.

Questo di certo sembra possibile.Con una combinazione di jQuery.aggiungere e jQuery.fadeIn e fadeOut si dovrebbe essere in grado di creare un bel po ' di schede di controllo.

Vedere JQuery UI/Schede di un modo semplice per creare un set di schede basate su un <ul> elemento e un set di <div>'s: http://docs.jquery.com/UI/Tabs

Vorrei anche suggerire l'iniezione di un ulteriore foglio di stile da utilizzare per mostrare/nascondere e stile di brutto elementi.

Abbellire il codice HTML non è un processo semplice, perché ogni interruzione di riga tra i tag è un nodo di testo e arbitrario di abbellimento crea ed elimina i nodi di testo in modo che possa essere dannoso per la struttura del documento e probabilmente dannoso per il contenuto.Mi consiglia di utilizzare un programma che ha già pensato a tutte queste condizioni, come http://prettydiff.com/?m=beautify

Suona come voi non sono interessati a un HTML di pulitura come HTML Tidy, ma in un interattivo valorizzazione di HTML statico componenti (es.trasformare una tabella statica in un'interfaccia a schede).

Alcune risposte qui ha già dato dei suggerimenti, ad esempioutilizzando Jquery Tabs, ma non mi piace l'HTML riscrivere approccio nelle loro risposte.

IMHO è meglio estrarre il contenuto delle celle della tabella che si desidera, con un selettore di JQuery, come: 

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

poi si può nutrire di questo tipo di dati a JQuery UI plugin, a livello di programmazione la creazione di schede:

$('body').append($('<div></div>').attr('id','mytabs'));
$('#mytabs').tabs({}); //specify tab preferences here
$('#mytabs').tabs('add',mycontent);
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top