AjaxControlToolKit TabContainer 标题头的样式
AjaxControlToolKit 4.0版本更新的最实用的工具就是TabContainer了
AjaxControlToolKit 使用方法
添加AjaxControlToolKit.DLL进工具箱
首先在页面中<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajax" %>
(从工具箱拖入AjaxControlToolKit控件的时候会自动引入)
然后引入一个<ajax:ToolkitScriptManager runat="server" ID="tm1" ></ajax:ToolkitScriptManager>
从工具箱拖入TabContainer,编辑成想要的样子,代码如下
<ajax:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="800px" Width="500px" BorderStyle="Groove" BorderColor="#66FF66" UseVerticalStripPlacement="false" > <ajax:TabPanel runat="server" HeaderText="asdf" ID="TabPanel1" > <ContentTemplate>
</ContentTemplate> </ajax:TabPanel> <ajax:TabPanel ID="TabPanel2" runat="server" HeaderText="科技" CssClass="keji"> <ContentTemplate> <table class="auto-style2"> <tr> <td>id</td> <td>categoryname</td> <td>image</td> <td>order_by</td> <td>path</td> </tr> <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:eshopConnectionString %>" SelectCommand="SELECT * FROM [product_category]"></asp:SqlDataSource>
<asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate> <tr> <td><%# Eval("Id") %></td> <td><%# Eval("category_name") %></td> <td><%# Eval("image") %></td> <td><%# Eval("order_by") %></td> <td><%# Eval("path") %></td> </tr> </ItemTemplate> </asp:Repeater> </table> </ContentTemplate>
</ajax:TabPanel> <ajax:TabPanel ID="TabPanel3" runat="server" HeaderText="探索"> <ContentTemplate> <table class="auto-style2"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </ContentTemplate>
</ajax:TabPanel> <ajax:TabPanel ID="TabPanel4" runat="server" HeaderText="体育" Width="100px"> <ContentTemplate> <table class="auto-style2"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </ContentTemplate>
</ajax:TabPanel> <ajax:TabPanel ID="TabPanel5" runat="server" HeaderText="新闻"> </ajax:TabPanel> <ajax:TabPanel ID="TabPanel6" runat="server" HeaderText="购物"> </ajax:TabPanel> <ajax:TabPanel ID="TabPanel7" runat="server" HeaderText="篮球NBA"> </ajax:TabPanel> </ajax:TabContainer>
使用中遇到一点问题,tab头的样式 不知道从哪里控制。。。