使用AjaxControlToolkit里的TabContainer做一个选项卡样式,页面名称Default.aspx,如下:
 <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="6" 
            Width="684px" Height="584px" AutoPostBack="True" 
            style="margin-bottom: 103px">
            <cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
                <HeaderTemplate>
                    新建项目
                </HeaderTemplate>
                <ContentTemplate>
                    <iframe src="1.aspx" height="500" style="width: 648px"></iframe> 
                </ContentTemplate>
            </cc1:TabPanel>
            <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2" TabIndex="1">
                <HeaderTemplate>
                    进行项目
                </HeaderTemplate>
                <ContentTemplate>
                    <iframe src="2.aspx" height="500" style="width: 648px"></iframe> 
                </ContentTemplate>
                </cc1:TabPanel>
                </cc1:TabContainer>
问题一:运行Default.aspx页面时,发现他把所有标签调用的页面都一次性加载了,当标签很多时,速度会很慢,请问怎样能够只加载当前页面,当点到其他标签时才加载其他页面??
问题二:<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2" TabIndex="1">中的TabIndex是控制什么的?我怎么发现新建TabPanel后,默认的都是TabIndex="0"?所有TabPanel的TabIndex都一样吗?
问题三:当标签很多时,怎样能够让标签自动分行显示???

解决方案 »

  1.   

    使用 Tabpanel.onclientclick 动态加载<%@ Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
             <script type="text/javascript">
                 function LoadTabBaidu() {
                     LoadTab('frmBaidu', 'http://www.baidu.com/s?wd=tabcontainer&cl=3&ie=utf-8' + Date());
                 }
                 function LoadTabLive() {
                     LoadTab('frmLive', 'http://search.live.com/results.aspx?q=tabcontainer&src=IE-SearchBox&Form=IE8SRC&stamp=' + Date());
                 }
                 function LoadTab(frmId, frmSrc) {                
                     var frm = document.getElementById(frmId);
                     if (frm.src == "") frm.src = frmSrc;
                 }
            </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>        <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <ajaxtoolkits:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
                <ajaxtoolkits:TabPanel ID="TabPanel1" runat="server" HeaderText="google">
                    <ContentTemplate>
                    <iframe id="frmHome" src="http://www.google.cn/search?hl=zh-CN&q=tabcontainer&lr="></iframe>
                    </ContentTemplate>
                </ajaxtoolkits:TabPanel>
                <ajaxtoolkits:TabPanel ID="TabPanel2" runat="server" HeaderText="baidu" OnClientClick="LoadTabBaidu"> <%--OnClientClick 指定的方法是不能带()的,所以不能指定参数--%>
                    <ContentTemplate>
                    <iframe id="frmBaidu" src=""></iframe>
                    </ContentTemplate>
                </ajaxtoolkits:TabPanel>
                <ajaxtoolkits:TabPanel ID="TabPanel3" runat="server" HeaderText="Live" OnClientClick="LoadTabLive">
                    <ContentTemplate>
                    <iframe id="frmLive" src=""></iframe>
                    </ContentTemplate>
                </ajaxtoolkits:TabPanel>
            </ajaxtoolkits:TabContainer>       
        </div>
        </form>
    </body>
    </html>
      

  2.   

    使用 TabPanel.OnClientClick 实现 TabContainer 按需加载
      

  3.   

    问题二: <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2" TabIndex="1">中的TabIndex是控制什么的?我怎么发现新建TabPanel后,默认的都是TabIndex="0"?所有TabPanel的TabIndex都一样吗? 
    问题三:当标签很多时,怎样能够让标签自动分行显示??? 有人知道吗??