asp.net ajax技术Tabs控件

1.前台代码

        <ajaxToolkit:TabContainer CssClass="ajaxTab" runat="server" ID="Tabs">

            <ajaxToolkit:TabPanel EnableTheming="false" runat="Server" Width="300px" ID="phlInfo" HeaderText="ID">

                <ContentTemplate>

                    <asp:Label ID="label1" runat="server" Text="用户名:"></asp:Label>

                    <asp:Button ID="bt1" runat="server"  Width="50px" Height="30px" Text="Submit"/>

                </ContentTemplate>

            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel runat="Server" ID="phlFlowLog" HeaderText="Name">

                <ContentTemplate>

                   <asp:TextBox ID="txtBox1"  runat="server"></asp:TextBox>

                </ContentTemplate>

            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel runat="Server" ID="phlFlowFigure" HeaderText="Password">

                <ContentTemplate>

                   <asp:DropDownList ID="lst1" runat="server"></asp:DropDownList>

                </ContentTemplate>

            </ajaxToolkit:TabPanel>

        </ajaxToolkit:TabContainer>

2.web.config

<?xml version="1.0"?>

<configuration>

 <configSections>

  <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">

   <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">

    <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>

    <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">

     <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"/>

     <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>

     <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>

    </sectionGroup>

   </sectionGroup>

  </sectionGroup>

 </configSections>

 <system.web>

  <pages>

   <controls>

    <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

    <add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="ajaxToolkit"/>

   </controls>

  </pages>

  <!--

          Set compilation debug="true" to insert debugging

          symbols into the compiled page. Because this

          affects performance, set this value to true only

          during development.

    -->

  <compilation debug="false">

   <assemblies>

    <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

    <add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>

    <add assembly="System.Web.Extensions.Design, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/></assemblies>

  </compilation>

  <httpHandlers>

   <remove verb="*" path="*.asmx"/>

   <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

   <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

   <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>

  </httpHandlers>

  <httpModules>

   <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

  </httpModules>

 </system.web>

 <system.web.extensions>

  <scripting>

   <webServices>

    <!-- Uncomment this line to customize maxJsonLength and add a custom converter -->

    <!--

      <jsonSerialization maxJsonLength="500">

        <converters>

          <add name="ConvertMe" type="Acme.SubAcme.ConvertMeTypeConverter"/>

        </converters>

      </jsonSerialization>

      -->

    <!-- Uncomment this line to enable the authentication service. Include requireSSL="true" if appropriate. -->

    <!--

        <authenticationService enabled="true" requireSSL = "true|false"/>

      -->

    <!-- Uncomment these lines to enable the profile service. To allow profile properties to be retrieved

           and modified in ASP.NET AJAX applications, you need to add each property name to the readAccessProperties and

           writeAccessProperties attributes. -->

    <!--

      <profileService enabled="true"

                      readAccessProperties="propertyname1,propertyname2"

                      writeAccessProperties="propertyname1,propertyname2" />

      -->

   </webServices>

   <!--

      <scriptResourceHandler enableCompression="true" enableCaching="true" />

      -->

  </scripting>

 </system.web.extensions>

 <system.webServer>

  <validation validateIntegratedModeConfiguration="false"/>

  <modules>

   <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

  </modules>

  <handlers>

   <remove name="WebServiceHandlerFactory-Integrated"/>

   <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

   <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

   <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

  </handlers>

 </system.webServer>

</configuration>

3.样式css

  <style type="text/css">

 .ajaxTab .ajax__tab_header

{

   <%--表头宽度，高度--%>;

    width:10px;

    padding:0px 0 0 0px;

    height: 20px;

}

.ajaxTab .ajax__tab_outer

{

    <%--Tab外围样式--%>;

      display:block;

      background:url("tabrightF.gif") no-repeat right top;

      border-left: solid 1px #000f0c;

     padding:0 0 0 4px;

     text-decoration:none;

}

.ajaxTab .ajax__tab_outer

{

    <%--Tab外围样式--%>;

      padding:5px 15px 4px 6px;

}

.ajaxTab .ajax__tab_inner

{

}

.ajaxTab .ajax__tab_tab

{

    font-size: 12px;

    width:100px;

    cursor:pointer;

    padding:-5px -5px 0 0px;

}

.ajaxTab .ajax__tab_hover .ajax__tab_outer ,.ajaxTab .ajax__tab_active .ajax__tab_outer

{

     background:url("tabrightF.gif") no-repeat right right;

     border-left: solid 1px #000f0c;

     background-position:0 -42px;

      color:#666;

}

.ajaxTab .ajax__tab_hover .ajax__tab_inner ,.ajaxTab .ajax__tab_active .ajax__tab_inner

{

 font-weight:bolder;

}

.ajaxTab .ajax__tab_active .ajax__tab_tab , .ajaxTab .ajax__tab_hover .ajax__tab_tab

{

   <%--鼠标moveon的事件--%>;

    text-align: center;

    font-size: 12px;

    cursor:pointer;

}

.ajaxTab .ajax__tab_active .ajax__tab_tab

{

  <%--鼠标点击后，选择当前Tab的事件--%>

}

.ajaxTab .ajax__tab_hover .ajax__tab_tab span , .ajaxTab .ajax__tab_active .ajax__tab_tab span

{

}

.ajaxTab .ajax__tab_body

{

   border-left: solid 1px #9FACB5;

   border-right: solid 1px #9FACB5;

   border-bottom: solid 1px #9FACB5;

   width:375px;

   height:100px;

}

    </style>