关于asp.net Tab选项卡的应用注意

最新推荐文章于 2019-05-28 08:25:18 发布

weixin_30908649

最新推荐文章于 2019-05-28 08:25:18 发布

阅读量113

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/yhongl/archive/2010/08/16/3937935.html

版权

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>未命名頁面</title> </head> <mce:script language="javascript"></mce:script> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="520px" Width="100%"> <cc1:TabPanel runat="server" HeaderText="汇报本周工作" ID="TabPanel1" OnClientClick="LoadTabShow"> <HeaderTemplate> 汇报本周工作 </HeaderTemplate> <ContentTemplate> <table align="left" class="style4" align="center"> <tr> <td style="text-align: center" mce_style="text-align: center"> 汇报状态: </td> <td> <asp:Literal ID="LitState" runat="server"></asp:Literal> 时间：<asp:Literal ID="LitTime" runat="server"></asp:Literal> </td> </tr> <tr> <td style="text-align: center" mce_style="text-align: center"> 汇报内容:* </td> <td> <asp:TextBox ID="txtContent" runat="server" Width="600px" TextMode="MultiLine" Height="150px"></asp:TextBox> </td> </tr> <tr> <td style="text-align: center" mce_style="text-align: center"> 下周计划: </td> <td> <asp:TextBox ID="txtNextContent" runat="server" Width="600px" TextMode="MultiLine" Height="150px"></asp:TextBox> </td> </tr> <tr> <td style="text-align: center" mce_style="text-align: center"> 附件: </td> <td> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="btnFileUp" runat="server" Text="提交" /> </td> </tr> <tr> <td colspan="2"> <hr /> </td> </tr> <tr> <td style="text-align: center" mce_style="text-align: center"> 浏览人员: </td> <td> <asp:TextBox ID="txtBrowsePeople" runat="server" Width="600px" Enabled="False"></asp:TextBox> </td> </tr> <tr> <td style="text-align: center" mce_style="text-align: center"> 领导批示: </td> <td> <asp:TextBox ID="txtAuthor" runat="server" Width="600px" Enabled="False" Height="24px"></asp:TextBox> </td> </tr> </table> </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel runat="server" HeaderText="参考本周日程" ID="TabPanel02" Height="500px" OnClientClick="LoadTabHide"> <HeaderTemplate> 参考本周日程 </HeaderTemplate> <ContentTemplate> <asp:Repeater ID="RepWeekRiCheng" runat="server"> <HeaderTemplate> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr style="height: 20px;"> <td style="width: 60%;"> 标题 </td> <td style="width: 20%;"> 开始时间 </td> <td style="width: 20%;"> 结束时间 </td> </tr> </HeaderTemplate> <ItemTemplate> <tr style="height: 25px;"> <td> <span οnclick="window.parent.parent.Div_Show('../schedule/add.aspx?id=<%# Eval("id") %>&v=v',345,653)" style="cursor: pointer; text-decoration: underline;"> <%# Eval("title") %></span> </td> <td> <%# Eval("start_Date")%> </td> <td> <%# Eval("end_date")%> </td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer> </div> </form> </body> </html>

1：用js 改变Tab选显示顺序

实现方法如下：

        function changeTab(tabIndex) {
            var tabBehavior = $get('<%=TabContainer1.ClientID%>').control;
            tabBehavior.set_activeTabIndex(tabIndex);
        }

1.1 通过后台方法更改

      public void SetTabIndex()
    {
        if (Request.QueryString["tab"] != null)
        {
            string strIndex = Request.QueryString["tab"].Trim();
            TabContainer1.ActiveTabIndex = int.Parse(strIndex);

}
}

2：更改Tab的显示名称

<cc1:TabPanel runat="server" HeaderText="汇报本周工作" ID="TabPanel1" OnClientClick="LoadTabShow">
                    <HeaderTemplate>
                        汇报本周工作
                    </HeaderTemplate>

还有一点，更改Tab选项卡的HeaderText 的值，如果不配置 <HeaderTemplate> 节点，就是不存在的意思，可从后台直接更改。

转载于:https://www.cnblogs.com/yhongl/archive/2010/08/16/3937935.html

weixin_30908649

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于asp.net Tab选项卡的应用注意

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>未命名頁面</title> </head> <mce:script language="javascript">&...
复制链接

扫一扫