on-demand rendering of tab elements / controls

[devnull]

I have several pages that contain as many as 10 tabs, and under each tab there could be as many as 20 different controls, with a potential of up to 200 controls in one page, this of course requires a huge amount of rendering and takes a long time to complete.

What I am looking for is the ability to render a tab's elements and ajax events, only when the tab is selected by the user.

This would mean that when the page initially loads, only the first tab is rendered, and the others are only rendered when the tab is selected.

Any suggestions on how this can be 'easily' achieved ?

If would be a great feature to add to the tab control ?

[stworthy]

Set the 'href' property for the tab panel to delay loading its content.

Code:

<div class="easyui-tabs" style="width:700px;height:250px">
	<div title="About" style="padding:10px">
		<p>The first tab.</p>
	</div>
	<div title="My Documents" style="padding:10px" href="_content1.html"></div>
	<div title="Help" data-options="iconCls:'icon-help',closable:true,href:'_content2.html'" style="padding:10px"></div>
</div>