清理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？

回答

相关问题