利用AJAX的TabContainer與TabPanel結合Javascript來製作類似Yahoo的首頁新聞頁籤的效果
這個範例主要是利用AJAX的TabContainer控制項與Javascript結合
來達到mouse移到TabContainer上的選項時,馬上更變TabPanel的功能
有點類似Yahoo首頁的動態新聞區塊的頁籤效果,完整程式碼如下：
Tab.aspx
001 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tab.aspx.cs" Inherits="Tab" %>
002
003 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
004 <html xmlns="http://www.w3.org/1999/xhtml">
005 <head id="Head1" runat="server">
006 <title>未命名頁面</title>
007 </head>
008
009 <script language="javascript">
010 function changeTab( tabIndex )
011 {
012 var tabBehavior = $get('<%=TabContainer1.ClientID%>').control;
013 tabBehavior.set_activeTabIndex(tabIndex);
014 }
015 </script>
016
017 <body>
018 <form id="form1" runat="server">
019 <div>
020 <asp:ScriptManager ID="ScriptManager1" runat="server">
021 </asp:ScriptManager>
022 <ajaxtoolkit:tabcontainer id="TabContainer1" runat="server" activetabindex="0" style="text-align: left"
023 width="460px">
024 <ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
025 <HeaderTemplate>
026 <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">
027 <tr>
028 <td>
029 <span id="TabHeader1" onmouseover="changeTab(0)">焦點新聞</span>
030 </td>
031 </tr>
032 </table>
033 </HeaderTemplate>
034 <ContentTemplate>
035 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
036 <ContentTemplate>
037 <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">
038 <tr>
039 <td>
040 焦點新聞1<br />
041 焦點新聞2</td>
042 </tr>
043 </table>
044 </ContentTemplate>
045 </asp:UpdatePanel>
046 </ContentTemplate>
047 </ajaxToolkit:TabPanel>
048 <ajaxToolkit:TabPanel ID="TabPanel2" runat="server">
049 <HeaderTemplate>
050 <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">
051 <tr>
052 <td>
053 <span id="TabHeader2" onmouseover="changeTab(1)">運動</span>
054 </td>
055 </tr>
056 </table>
057 </HeaderTemplate>
058 <ContentTemplate>
059 <asp:UpdatePanel ID="UpdatePanel2" runat="server">
060 <ContentTemplate>
061 <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">
062 <tr>
063 <td>
064 運動1<br />
065 運動2</td>
066 </tr>
067 </table>
068 </ContentTemplate>
069 </asp:UpdatePanel>
070 </ContentTemplate>
071 </ajaxToolkit:TabPanel>
072 <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
073 <HeaderTemplate>
074 <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">
075 <tr>
076 <td>
077 <span id="Span3" onmouseover="changeTab(2)">影視</span>
078 </td>
079 </tr>
080 </table>
081 </HeaderTemplate>
082 <ContentTemplate><asp:UpdatePanel ID="UpdatePanel3" runat="server">
083 <ContentTemplate>
084 <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">
085 <tr>
086 <td>
087 影視1<br />
088 影視2</td>
089 </tr>
090 </table>
091 </ContentTemplate>
092 </asp:UpdatePanel>
093 </ContentTemplate>
094 </ajaxToolkit:TabPanel>
095 <ajaxToolkit:TabPanel ID="TabPanel4" runat="server" HeaderText="TabPanel4">
096 <HeaderTemplate>
097 <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">
098 <tr>
099 <td>
100 <span id="Span2" onmouseover="changeTab(3)">國際</span>
101 </td>
102 </tr>
103 </table>
104
105 </HeaderTemplate>
106 <ContentTemplate><asp:UpdatePanel ID="UpdatePanel4" runat="server">
107 <ContentTemplate>
108 <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">
109 <tr>
110 <td>
111 國際1<br />
112 國際2</td>
113 </tr>
114 </table>
115 </ContentTemplate>
116 </asp:UpdatePanel>
117 </ContentTemplate>
118 </ajaxToolkit:TabPanel>
119 </ajaxtoolkit:tabcontainer>
120 </div>
121 </form>
122 </body>
123 </html>
124
002
003 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
004 <html xmlns="http://www.w3.org/1999/xhtml">
005 <head id="Head1" runat="server">
006 <title>未命名頁面</title>
007 </head>
008
009 <script language="javascript">
010 function changeTab( tabIndex )
011 {
012 var tabBehavior = $get('<%=TabContainer1.ClientID%>').control;
013 tabBehavior.set_activeTabIndex(tabIndex);
014 }
015 </script>
016
017 <body>
018 <form id="form1" runat="server">
019 <div>
020 <asp:ScriptManager ID="ScriptManager1" runat="server">
021 </asp:ScriptManager>
022 <ajaxtoolkit:tabcontainer id="TabContainer1" runat="server" activetabindex="0" style="text-align: left"
023 width="460px">
024 <ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
025 <HeaderTemplate>
026 <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">
027 <tr>
028 <td>
029 <span id="TabHeader1" onmouseover="changeTab(0)">焦點新聞</span>
030 </td>
031 </tr>
032 </table>
033 </HeaderTemplate>
034 <ContentTemplate>
035 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
036 <ContentTemplate>
037 <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">
038 <tr>
039 <td>
040 焦點新聞1<br />
041 焦點新聞2</td>
042 </tr>
043 </table>
044 </ContentTemplate>
045 </asp:UpdatePanel>
046 </ContentTemplate>
047 </ajaxToolkit:TabPanel>
048 <ajaxToolkit:TabPanel ID="TabPanel2" runat="server">
049 <HeaderTemplate>
050 <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">
051 <tr>
052 <td>
053 <span id="TabHeader2" onmouseover="changeTab(1)">運動</span>
054 </td>
055 </tr>
056 </table>
057 </HeaderTemplate>
058 <ContentTemplate>
059 <asp:UpdatePanel ID="UpdatePanel2" runat="server">
060 <ContentTemplate>
061 <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">
062 <tr>
063 <td>
064 運動1<br />
065 運動2</td>
066 </tr>
067 </table>
068 </ContentTemplate>
069 </asp:UpdatePanel>
070 </ContentTemplate>
071 </ajaxToolkit:TabPanel>
072 <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
073 <HeaderTemplate>
074 <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">
075 <tr>
076 <td>
077 <span id="Span3" onmouseover="changeTab(2)">影視</span>
078 </td>
079 </tr>
080 </table>
081 </HeaderTemplate>
082 <ContentTemplate><asp:UpdatePanel ID="UpdatePanel3" runat="server">
083 <ContentTemplate>
084 <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">
085 <tr>
086 <td>
087 影視1<br />
088 影視2</td>
089 </tr>
090 </table>
091 </ContentTemplate>
092 </asp:UpdatePanel>
093 </ContentTemplate>
094 </ajaxToolkit:TabPanel>
095 <ajaxToolkit:TabPanel ID="TabPanel4" runat="server" HeaderText="TabPanel4">
096 <HeaderTemplate>
097 <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">
098 <tr>
099 <td>
100 <span id="Span2" onmouseover="changeTab(3)">國際</span>
101 </td>
102 </tr>
103 </table>
104
105 </HeaderTemplate>
106 <ContentTemplate><asp:UpdatePanel ID="UpdatePanel4" runat="server">
107 <ContentTemplate>
108 <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">
109 <tr>
110 <td>
111 國際1<br />
112 國際2</td>
113 </tr>
114 </table>
115 </ContentTemplate>
116 </asp:UpdatePanel>
117 </ContentTemplate>
118 </ajaxToolkit:TabPanel>
119 </ajaxtoolkit:tabcontainer>
120 </div>
121 </form>
122 </body>
123 </html>
124