Can this be done? I’m building a template generator complete with resizable and draggable elements inside a preview window. Problem is, when I go to get the HTML generated, each of the elements have all the JQueryUI classes and divs added, which are not desirable in the final product. I’d like the output HTML to be simple enough that I can scale up positions and sizes so that it could be its own page, but I can’t find a way to keep the preview window as customizable as possible and still get clean HTML out of it. Anybody ever done something like this before? thoughts? ideas? Thanks in advance.
EDIT:
In other words, I want to somehow process this 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>
and end up with something more like this:
<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>
For almost each Jquery UI object you can call a ‘destroy’ method that removes all the special html.