天天看点

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

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>未命名頁面</title>

</head>

<mce:script language="javascript"><!--

function changeTab( tabIndex )

{

var tabBehavior = $get('<%=TabContainer1.ClientID%>').control;

tabBehavior.set_activeTabIndex(tabIndex);

}

// --></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 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> 节点,就是不存在的意思,可从后台直接更改。

继续阅读