zoukankan      html  css  js  c++  java
  • tabs 控件

    功能:
        将需要将页面中多个具备类似性质或功能的控件归纳为同一组的时候,可以使用"索引标签"来进行分类。这些分类的标签将被包含在同一个"索引标签容器"(TabContainer)中。

    属性(TabContainer):
        ActiveTabChanged :当我们单击索引标签时,并不会真正引发回送或回调动作,直到页面进行下一次的回送时,
              才会执行定义在这个事件处理函数内的程序代码。
              一般来说,我们会将这个事件设置为UpdatePane控件之AsyncPostBackTrigger类型触发器的控件事件。
        OnClientActiveTabChanged:当作用索引标签改变,并在客户端触发tabChanged事件时,所要执行的javascript程序代码。
        OnActiveTabChanged:指定当页面回送时,所要执行的服务器端函数。
        ActiveTabIndex:第一个要被显示的索引标签。
        CssClass:替每个索引标签指定一个自定义的CSS样式。
        Height:索引标签主体的高度(不将TabPanel的标题高度列入计算).
        Width:索引标签主体的宽度。
        ScrollBars: 在索引标签容器中,显示滚动条的方式,可以设置成下列几种:
         None:  不显示滚动条。
         Horizontal:只显示水平滚动条。
         Vertical: 只显示垂直滚动条。
         Both:同时显示水平和垂直滚动条。
         Auto:根据需要,自动显示最适当的滚动条。

    代码实例:
    <form id="form1" runat="server">
        
    <div>
            
    <asp:ScriptManager ID="ScriptManager1" runat="server">
            
    </asp:ScriptManager>    
        
    </div>
        
            
    <ajaxToolkit:TabContainer ID="tcTab" runat="server"
                OnClientActiveTabChanged
    ="DoActiveTabChangedClient"
                OnActiveTabChanged
    ="DoActiveTabChangedServer"
                CssClass
    ="cssLiMing_tab" ScrollBars="Auto" ActiveTabIndex="0"
                Height
    ="200" Width="450px">
                
    <ajaxToolkit:TabPanel ID="tpValidator" runat="server"
                    ScrollBars
    ="None" Enabled="true" Visible="true">
                    
    <HeaderTemplate>
                        
    <font color="Blue">输入姓名</font>
                    
    </HeaderTemplate>
                    
    <ContentTemplate>
                        
    <div class="title">使用服务器端验证器</div>
                        请键入您的姓名:
    <br />
                        
    <asp:TextBox ID="txtRequired" runat="server" />                   
                    
    </ContentTemplate>
                
    </ajaxToolkit:TabPanel>

                
    <ajaxToolkit:TabPanel ID="tpResult" runat="server">
                    
    <HeaderTemplate>
                        查看结果
                    
    </HeaderTemplate>
                    
    <ContentTemplate>
                        
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                            
    <ContentTemplate>
                                
    <div,>显示于前一个索引标签中,所输入的姓名</div>
                                您所输入的姓名为:
    <br />
                                
    <%= this.txtRequired.Text%>
                            
    </ContentTemplate>
                            
    <Triggers>
                                
    <asp:AsyncPostBackTrigger ControlID="tcTab"
                                    EventName
    ="ActiveTabChanged" />
                            
    </Triggers>
                        
    </asp:UpdatePanel>
                    
    </ContentTemplate>
                
    </ajaxToolkit:TabPanel>

                
    <ajaxToolkit:TabPanel ID="tpBooks" runat="server"
                    ScrollBars
    ="Auto"
                    Enabled
    ="true"
                    Visible
    ="true">
                    
    <HeaderTemplate>
                        
    <font color="#5533ff">详细信息</font>
                    
    </HeaderTemplate>
                    
    <ContentTemplate>                   
                        
    <asp:Panel ID="panTitle" runat="server" Height="30px" Width="650px"
                                   Style
    ="background-color: Pink">
                          
    <div style="padding: 5px; cursor: hand;">
                            
    <div style="float: left;">
                              
    <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Expand.gif" />
                            
    </div>
                         
                            
    <div style="float: right; color: brown">
                              
    <asp:Label ID="Label1" runat="server"></asp:Label>
                            
    </div>
                          
    </div>
                        
    </asp:Panel>

                       
                        
    <asp:Panel ID="panContent" runat="server" Width="650px"
                                   Style
    ="background-color: AliceBlue;
                                          color: Blue; padding: 5px 5px 5px 5px"
    >                     
                            
    <ItemTemplate>
                      
    <div>个人档案</div>
                        
    <ul>
                            
    <li>姓名:王晓成</li>
                            
    <li>性别:男</li>
                            
    <li>职业:程序员</li>
                            
    <li>联系方式:abcdwxc@gmail.com</li>
                            
    <li>住址:北京海淀</li>
                        
    </ul>
                        
    <br />
                            
    </ItemTemplate>
                          
                        
    </asp:Panel>
                        
                        
    <ajaxToolkit:CollapsiblePanelExtender ID="CPE" runat="server"
                                                              TargetControlID
    ="panContent"
                                                              CollapseControlID
    ="panTitle"
                                                              ExpandControlID
    ="panTitle"
                                                              TextLabelID
    ="Label1"
                                                              ExpandedText
    ="(隐藏内容)"
                                                              CollapsedText
    ="(显示内容)"
                                                              ImageControlID
    ="Image1"
                                                              ExpandedImage
    ="~/Images/Collapse.gif"
                                                              CollapsedImage
    ="~/Images/Expand.gif"
                                                              ExpandDirection
    ="Vertical"
                                                              SuppressPostBack
    ="true">
                        
    </ajaxToolkit:CollapsiblePanelExtender>
                    
    </ContentTemplate>
                
    </ajaxToolkit:TabPanel>
            
    </ajaxToolkit:TabContainer>

            
    <table width="670px">
                
    <tr>
                    
    <td width="50%">
                        
    <input id="btnHide" type="button" value="隐藏第三个索引标签" onclick="disableTab(2);" />
                    
    </td>
                    
    <td>
                        
    <input id="btnUnHide" type="button" value="开启第三个索引标签" onclick="enableTab(2);" />
                    
    </td>
                
    </tr>
                
    <tr>
                    
    <td align="right">
                        所选取的索引标签名称:
                    
    </td>
                    
    <td>
                        
    <asp:Label ID="lblCurrentTab" runat="server"></asp:Label>
                    
    </td>
                
    </tr>
            
    </table>
    </form>

    运行结果:
            
            
            
  • 相关阅读:
    A Simple Problem with Integers poj 3468 多树状数组解决区间修改问题。
    Fliptile 开关问题 poj 3279
    Face The Right Way 一道不错的尺取法和标记法题目。 poj 3276
    Aggressive cows 二分不仅仅是查找
    Cable master(二分题 注意精度)
    B. Pasha and String
    Intervals poj 1201 差分约束系统
    UITextField的快速基本使用代码块
    将UIImage转换成圆形图片image
    color转成image对象
  • 原文地址:https://www.cnblogs.com/abcdwxc/p/959017.html
Copyright © 2011-2022 走看看