In content.htmlCodeThe following code snippet shows the running effect:Copy codeThe Code is as follows: <HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Style type = "text/CSS">
Body {font-size: 12px ;}
</Style>
</Head>
<Body>
Tabpanel Control Learning
</Body>
</Html>
the most flexible option for tabpanel is to dynamically create sub-labels, for more information about the implementation principles of this creation process, see the two articles I wrote earlier (this article has a connection ), it should be noted that the synchronization event cannot be used to create the tag. 1. All the tag options created by PostBack on the page will be cleared. You can use the ajaxevent mechanism provided by coolite toolkit to dynamically create data using the server-side background code. copy Code the code is as follows: protected void creatatab_click (Object sender, ajaxeventargs e)
{< br> var tab = new tab ("add a tab through ajaxevent");
tab. tabindex = short. parse ("11");
tab. id = "Tabid";
tab. autoload. url = "http://www.jb51.net";
tab. autoload. nocache = true;
tab. autoload. mode = loadmode. IFRAME;
This. tabpanel. tabs. add (Tab);
This. tabpanel. activetab = tab;
}< br>
I personally think that page creation through synchronization will always shake, and the flash is quite unpleasant. We recommend that you use the client to dynamically Add sub-tag options. tabpanel provides the corresponding client APIs to complete these operations.Copy codeThe Code is as follows: <Ext: button id = "btnclient" runat = "server" text = "add tab (client)">
<Listeners>
<Click handler = "addtab (# {tabpanel}, 'tabcnblogs', 'HTTP: // www.jb51.net');"/>
</Listeners>
</Ext: button>
You can use the addtab () method of JavaScript to create a dynamic table. The three parameters are the tabpanel Control ID, the ID of the newly created tab, and the content path of the tab created in the West.Copy codeThe Code is as follows: <SCRIPT type = "text/JavaScript">
Function addtab (tabpanel, ID, URL ){
VaR tab = tabpanel. getcomponent (ID );
If (! Tab ){
Tab = tabpanel. Add ({
ID: ID,
Title: URL,
Closable: True,
Autoload :{
Showmask: True,
URL: URL,
Mode: 'iframe ',
Maskmsg: 'loading'
}
});
}
Tabpanel. setactivetab (Tab );
}
</SCRIPT>
the client is created by using ext only. tabpanel provides APIs to directly obtain the existence of sub-tabs with the specified ID. This function can perfectly process mutual exclusion, to create a unique tab sub-tab option.
tabpanel is used to process multiple tabs. Most of the time, tabpanel is used as a container. Its container functions are basically the same as panel and window functions. Take the tree created in the previous article as an example. Now you need to display the tree in a sub-label option of tabpanel, you can directly call the tabpanel client API method addtab to add an existing container control to the tabpanel to make it a sub-Tab Of The tabpanel.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
