Usar jQuery para embellecer el html de otra persona

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

  •  09-06-2019
  •  | 
  •  

Pregunta

Tengo una aplicación de terceros que crea informes basados ​​en HTML que necesito mostrar.Tengo alguno control sobre su apariencia, pero en general es bastante primitivo.I poder Sin embargo, inyecte algo de javascript.Me gustaría intentar inyectarle algo de bondad de jQuery para ordenarlo un poco.Una cosa específica que me gustaría hacer es tomar una tabla (una <table> HTML real) que siempre contenga una fila y un número variable de columnas y convertirla mágicamente en una vista con pestañas donde el contenido (siempre un <div> que Puedo proporcionar una identificación si es necesario) de cada celda de la tabla original representa una hoja en la vista con pestañas.No he encontrado nada bueno (lea:simple) ejemplos de elementos de repaternidad como este, así que no estoy seguro de por dónde empezar.¿Alguien puede darme algunas pistas sobre cómo podría intentar esto?

¿Fue útil?

Solución

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

el siguiente código jQuery convierte las celdas de la tabla en pestañas (probado en 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 que esto funcione, hice referencia a los siguientes archivos jQuery

  • jquery-último.js
  • ui.core.js
  • ui.tabs.js

Y hice referencia a la hoja de estilo flora.all.css.Básicamente copié la sección del encabezado del Ejemplo de pestaña jQuery

Otros consejos

Podrías hacer esto con jQuery pero puede hacer que el mantenimiento adicional sea una pesadilla.Recomendaría no hacer esto / raspado de pantalla porque si la fuente alguna vez cambia, también cambiará su solución.

Esto ciertamente parece posible.Con una combinación de jQuery.append y jQuery.fadeIn y fadeOut deberías poder crear un pequeño control con pestañas.

Consulte JQuery UI/Tabs para conocer una forma sencilla de crear un conjunto de pestañas basadas en un <ul> elemento y un conjunto de <div>'s: http://docs.jquery.com/UI/Tabs

También sugeriría inyectar una hoja de estilo adicional y usarla para mostrar/ocultar y diseñar elementos feos.

Embellecer HTML no es un proceso tan simple, porque cada salto de línea entre etiquetas es un nodo de texto y el embellecimiento arbitrario crea y elimina nodos de texto de una manera que podría ser perjudicial para la estructura del documento y probablemente perjudicial para el contenido.Recomiendo usar un programa que ya haya pensado en todas estas condiciones, como http://prettydiff.com/?m=beautify

Parece que no está interesado en una limpieza de HTML como lo hace HTML Tidy, sino en una mejora interactiva de componentes HTML estáticos (p. ej.girar una mesa estática en una interfaz con pestañas).

Algunas respuestas aquí ya le dieron pistas, p.usando Jquery Tabs, pero no me gusta el enfoque de reescritura de HTML en sus respuestas.

En mi humilde opinión, es mejor extraer el contenido de las celdas de la tabla que desea con un selector JQuery, como: 

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

luego puede enviar estos datos al complemento JQuery UI creando las pestañas mediante programación:

$('body').append($('<div></div>').attr('id','mytabs'));
$('#mytabs').tabs({}); //specify tab preferences here
$('#mytabs').tabs('add',mycontent);
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top