Nettoyage du code HTML généré par JQueryUI?

Est-ce que cela peut être fait? Je construis un générateur de template complet avec des éléments redimensionnables et déplaçables dans une fenêtre de prévisualisation. Le problème est, quand je vais obtenir le HTML généré, chacun des éléments a toutes les classes et divs JQueryUI ajoutées, qui ne sont pas souhaitables dans le produit final. Je voudrais que le HTML de sortie soit assez simple pour que je puisse redimensionner les positions et les tailles afin qu'il puisse être sa propre page, mais je ne trouve pas un moyen de garder la fenêtre de prévisualisation aussi personnalisable que possible. en dehors de ça. Quelqu'un a déjà fait quelque chose comme ça avant? pensées? des idées? Merci d'avance.Nettoyage du code HTML généré par JQueryUI?

EDIT: En d'autres termes, je veux traiter en quelque sorte ce html:

<div id="preview_title" value="Title" class="ui-draggable ui-resizable" style="visibility: visible; ">Title<div class="ui-resizable-handle ui-resizable-e" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; " unselectable="on"></div></div> 
      <div id="preview_logo" value="Logo" class="ui-draggable ui-resizable" style="visibility: visible; ">Logo<div class="ui-resizable-handle ui-resizable-e" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; " unselectable="on"></div></div> 
      <div id="preview_ticker" value="Ticker" class="ui-draggable ui-resizable" style="visibility: visible; ">Ticker<div class="ui-resizable-handle ui-resizable-e" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; " unselectable="on"></div></div> 
      <div id="preview_clock" value="Clock" class="ui-draggable ui-resizable" style="visibility: visible; ">Clock<div class="ui-resizable-handle ui-resizable-e" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; " unselectable="on"></div></div>

et se retrouver avec quelque chose comme ceci:

<div id="preview_title" value="Title" style="visibility: visible; width: 400px; height: 16px; top: 32px; left: 12px; ">Title</div> 
      <div id="preview_logo" value="Logo" style="visibility: visible; width: 50px; height: 50px; top: 123px; left: 16px; ">Logo</div> 
      <div id="preview_ticker" value="Ticker" style="visibility: visible; width: 400px; height: 32px; top: 12px; left: 12px; ">Ticker</div> 
      <div id="preview_clock" value="Clock" style="visibility: visible; width: 45px; height: 45px; top: 12px; left: 100px; ">Clock</div>

Source

2010-08-03 jakev

Voulez-vous dire que la sortie ne sera pas redimensionnable, draggable, etc? – Fosco

droite, je veux que la sortie soit le résultat du redimensionnement et en faisant glisser l'utilisateur avant de cliquer sur le bouton "Générer HTML". – jakev

pourquoi cela a-t-il été rejeté? :( – jakev

Pour presque chaque objet JQuery UI vous pouvez appelez une méthode 'destroy' qui supprime tout le HTML spécial.

Source

2010-08-03 18:24:30 ZippyV

ah, merci, je vais regarder dans ce – jakev

Cependant, je ne sais pas si appeler détruire va garder les données que vous voulez – ZippyV

Il le fait, heureusement, je reçois exactement ce que je veux, merci Zippy. – jakev

si vous souhaitez supprimer l'élément de DOM, jQuery a une méthode pour empty et remove

Exemple pour un dialogue jQuery (dire que vous voulez plusieurs boîtes de dialogue sur la même div:

<div class="someFancyDialog"> 
    <label class="name"></label> 
    ... 
</div> 
$(.someFancyDialog).bind('dialogclose', function(event, ui) 
{ 
    $(event.target).empty().remove(); 
} 
$(.someFancyDialog).dialog();

En De cette façon, vous êtes sûr que le DOM reste propre après la destruction de la boîte de dialogue

Source

2010-08-03 18:56:53

Nettoyage du code HTML généré par JQueryUI?

Répondre

Questions connexes