清理JQueryUI生成的HTML？

可以這樣做嗎？我正在構建一個模板生成器，其中包含預覽窗口內的可調整大小和可拖動元素。問題是，當我去獲取生成的HTML時，每個元素都添加了所有的JQueryUI類和div，這在最終產品中是不可取的。我希望輸出的HTML足夠簡單，以便我可以擴展位置和大小，以便它可以成爲它自己的頁面，但是我找不到一種方法將預覽窗口儘可能地自定義，並仍然使用乾淨的HTML出來了。有人曾經做過這樣的事情嗎？想法？想法？提前致謝。清理JQueryUI生成的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>

，並與更多的東西像這樣結束：

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

來源

2010-08-03 jakev

你是說輸出不能調整大小，拖動等？ – Fosco 2010-08-03 18:15:07

對，我希望輸出是調整大小和在用戶點擊'生成HTML'按鈕之前拖動用戶。 – jakev 2010-08-03 18:19:06

這怎麼得到了投票呢？ :( – jakev 2010-08-03 18:24:14

對於幾乎每個jQuery UI的對象，你可以調用一個刪除所有特殊html的'destroy'方法。

如果你想刪除DOM元素

來源

2010-08-03 18:24:30 ZippyV

啊，謝謝你，我會研究一下。 – jakev 2010-08-03 18:25:51

然而，我不知道如果調用destroy會保留你想要的數據 – ZippyV 2010-08-03 18:41:37

它的確如此，謝天謝地，我正在得到我想要的，謝謝。比比。 – jakev 2010-08-03 18:55:20

，jQuery的有empty和一個jQuery對話框的方法remove

例（說你要在同一div多個對話：

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

在通過這種方式，你可以確定在對話框銷燬後DOM保持乾淨。

來源

2010-08-03 18:56:53

清理JQueryUI生成的HTML？

回答

相關問題