<com:TForm ID="form1">

<h1>My Tab Panel Test</h1>

<div id="loading" style="display: none; z-index: 10; width: 16px; height: 16px; position: absolute; left: 5px; top: 5px;">
	LLoading...
</div>
<ul>
<li>
  <com:TActiveLinkButton OnCallback="onShowPanelA" Text="Panel A">
    <prop:ClientSide OnLoading="$('loading').show()" OnComplete="$('loading').hide()"/>
  </com:TActiveLinkButton>
</li>
<li>
  <com:TActiveLinkButton OnCallback="onShowPanelB" Text="Panel B">
    <prop:ClientSide OnLoading="$('loading').show()" OnComplete="$('loading').hide()"/>
  </com:TActiveLinkButton>
</li>
<li>
  <com:TActiveLinkButton OnCallback="onShowPanelC" Text="Panel C">
    <prop:ClientSide OnLoading="$('loading').show()" OnComplete="$('loading').hide()"/>
  </com:TActiveLinkButton>
</li>
</ul>

<com:TActivePanel ID="pnlContentsA" Attributes.style="display: none;">
 This is the contents of panel A
 <com:Application.pages.MyControl/>
</com:TActivePanel>

<com:TActivePanel ID="pnlContentsB" Attributes.style="display: none;">
 This is the contents of panel B
</com:TActivePanel>

<com:TActivePanel ID="pnlContentsC" Attributes.style="display: none;">
 This is the contents of panel C
</com:TActivePanel>

<com:TJavascriptLogger />

</com:TForm>