Reuseable DIVs?

[qiuyl]

One <div></div> can be used repeated in one page or crossed pages. For example, a <DIV> for tree structure can be used in left (which is Jack's west panel) and the same for an image dialog's left panel. What is the efficient way to make an reusable DIV in the same page, or even cross pages, which is similar to .NET's user control?

<div id='main_content'>
<div id="tree_left">tree structre</div>
</div

<div id='dialog'>
<div id="tree_left_dialog">tree structre</div>
</div>

When I load the dialog, I can use:
getEl(tree_left_dialog).update(getEl(tree_left).dom.innerHTML)

However, the tree structure's funcations could be lost.

I have no idea how one tree structure can be used in crossed pages.

What is the best strategy for that? thanks a lot!

Jack and all YUI-Ext fans, Merry Christmas!

[jack.slocum]

You can move the node (and retain handlers), but the node can't be in two places at once. e.g.

getEl(tree_left_dialog).appendTo('tree_left');

[TommyMaintz]

the only thing you could do is create a clone of the div and append that whereever you want.

you should google the function cloneNode ifor more details.
however there is no function in yui-ext as far as i know (just started using yui-ext) but you could look up how the drag and drop class in yui creates a ghost (proxy) in the ddproxy object.

if you give them the same classname you can make them look the same aswell.

this is how i have implemented a similar thing into a list widget where i wanted to make exactly similar ghosts when you where dragging a list element.

ghost = clickEl.cloneNode(true);
ghost.id = ghostId = String('ghost_' + Math.round(Math.random() * 10000));
with(ghost.style) {
position = 'absolute';
cursor = 'move';
zIndex = 999;
}
$D.setStyle(ghost, 'opacity', .7);
ghost.innerHTML = clickEl.innerHTML;

generating the id and setting its style can be done alot easier with functions in yui-ext and yui.

[jack.slocum]

He wants to retain event handlers though (at least that what I thought).

[manugoel2003]

How about this, move the original tree to the dialog (do not copy it, move it), thus retaining all the event handlers..... and then put the ghost in the original location.... and when you are done with the dialog, just destroy the ghost and move back the tree to the original location.... I hope it will serve what you need