uiBox
John, Yehuda, and I were talking about methods for creating the various DOM needed for theming. This is the solution we came up with:
## jQuery style [<span style="font-style: italic;">javascript</span>]
<span style="font-family: courier new,monospace;">
$("div.modal")</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> .uiBox({</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
top:'<span class="title">'+title+'</span>',</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> left:function(){$(this).hide(); } })
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> .uiBox("top")</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
.addClass("draggable")</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> .end()</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
.draggable({ handle: 'div.top' });</span>
## Result [<span style="font-style: italic;">html</span>]
<span style="font-family: courier new,monospace;"><div class="uiBox"></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> <div class="top draggable"><span class="title">Modal Title</span></div></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> <div class="middle"></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <div class="left"/>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <div class="center">Content of the Modal</div></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> <div class="right"/></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> </div></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> <div class="bottom"/></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"></div></span>
~Sean
## jQuery style [<span style="font-style: italic;">javascript</span>]
<span style="font-family: courier new,monospace;">
$("div.modal")</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> .uiBox({</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
top:'<span class="title">'+title+'</span>',</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> left:function(){$(this).hide(); } })
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> .uiBox("top")</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
.addClass("draggable")</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> .end()</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
.draggable({ handle: 'div.top' });</span>
## Result [<span style="font-style: italic;">html</span>]
<span style="font-family: courier new,monospace;"><div class="uiBox"></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> <div class="top draggable"><span class="title">Modal Title</span></div></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> <div class="middle"></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <div class="left"/>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <div class="center">Content of the Modal</div></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> <div class="right"/></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> </div></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> <div class="bottom"/></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"></div></span>
~Sean
Topic Participants
littlecooldude
Rey Bango
John Resig
gilles0181