Utilisation de jQuery pour embellir quelqu'un d'autre html

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

  •  09-06-2019
  •  | 
  •  

Question

J'ai une application tierce qui crée HTML basé sur les rapports que j'ai besoin d'afficher.J'ai certains contrôle sur la façon dont ils regardent, mais en général c'est assez primitif.J' peut injecter un peu de javascript, si.Je voudrais essayer de faire quelques jQuery bonté en elle de la ranger certains.Une chose spécifique que je voudrais faire est de prendre une table (une réelle HTML <table>) qui contient toujours une ligne et un nombre variable de colonnes et comme par magie les convertir dans un des onglets de la vue où le contenu (toujours un <div> que je peux fournir un IDENTIFIANT si nécessaire) de l'original de chaque cellule du tableau représente une feuille dans l'affichage des onglets.Je n'ai pas trouvé de bonne (lire:simple) exemples de re-parenting des articles comme cela, donc je ne sais pas par où commencer.Quelqu'un peut-il fournir quelques conseils sur comment je pourrais essayer cela?

Était-ce utile?

La solution

Compte tenu d'une page html comme ceci:

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

la suite de jQuery code convertit les cellules de la table dans des onglets (testé dans 3 FF et 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();
});

Pour obtenir que cela fonctionne j'ai référencé la suite fichiers jQuery

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

Et j'ai référencé la flore.tous les.la feuille de style css.Fondamentalement, j'ai copié la section d'en-tête de la jQuery onglet exemple

Autres conseils

Vous pouvez le faire avec jQuery, mais il peut apporter d'autres à l'entretien d'un cauchemar.Je déconseille de faire cette capture d'écran car si la source ne change jamais fait de votre travail autour de.

Ceci semble possible.Avec une combinaison de jQuery.ajouter et jQuery.fadeIn et fadeOut vous devriez être en mesure de créer une belle petite onglets de contrôle.

Voir le JQuery UI/Onglets pour un moyen simple de créer un ensemble d'onglets basé sur un <ul> élément et un ensemble de <div>'s: http://docs.jquery.com/UI/Tabs

Je vous suggère aussi d'injecter un supplément de feuille de style et l'utiliser pour afficher/masquer et de style laid.

L'embellissement de HTML n'est pas un processus simple, parce que chaque saut de ligne entre les balises est un nœud de texte et de l'arbitraire de l'embellissement crée et supprime les nœuds de texte d'une manière qui pourrait être préjudiciable à la structure du document et probablement nocif pour le contenu.Je recommande d'utiliser un programme qui a déjà pensé à toutes ces conditions, comme le http://prettydiff.com/?m=beautify

On dirait que vous n'êtes pas intéressé dans un HTML nettoyage comme HTML Tidy, mais en interactif amélioration de HTML statique des composants (par ex.tournage d'un tableau statique dans une interface à onglets).

Quelques réponses ici vous ai déjà donné des conseils, par exempleen utilisant les Onglets Jquery, mais je n'aime pas le HTML de réécriture d'approche dans leurs réponses.

À mon humble avis de son mieux pour extraire le contenu des cellules du tableau que vous voulez avec un sélecteur JQuery, comme: 

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

puis vous pouvez nourrir de ces données à l'INTERFACE utilisateur de JQuery plugin par programmation, création d'onglets:

$('body').append($('<div></div>').attr('id','mytabs'));
$('#mytabs').tabs({}); //specify tab preferences here
$('#mytabs').tabs('add',mycontent);
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top