利用AJAX的TabContainer與TabPanel結合Javascript來製作類似Yahoo的首頁新聞頁籤的效果

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tab.aspx.cs" Inherits="Tab" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



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

<head runat="server">

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

</head>

<script language="javascript">

function changeTab( tabIndex )

{      

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

    tabBehavior.set_activeTabIndex(tabIndex);

}

</script>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

        <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"

            Style="text-align: left" Width="460px">

            <ajaxToolkit:TabPanel ID="TabPanel1" runat="server">

                <HeaderTemplate>                   

                    <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">

                        <tr>

                            <td>

                                <span id="TabHeader1" onmouseover="changeTab(0)">焦點新聞</span>

                            </td>

                        </tr>

                    </table>

                </HeaderTemplate>

                <ContentTemplate>

                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                        <ContentTemplate>

                            <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">

                                <tr>

                                    <td>

                                        焦點新聞1<br />

                                        焦點新聞2</td>

                                </tr>

                            </table>

                        </ContentTemplate>

                    </asp:UpdatePanel>

                </ContentTemplate>

            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel ID="TabPanel2" runat="server">

                <HeaderTemplate>

                    <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">

                        <tr>

                            <td>

                                <span id="TabHeader2" onmouseover="changeTab(1)">運動</span>

                            </td>

                        </tr>

                    </table>

                </HeaderTemplate>

                <ContentTemplate>

                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">

                        <ContentTemplate>

                            <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">

                                <tr>

                                    <td>

                                        運動1<br />

                                        運動2</td>

                                </tr>

                            </table>

                        </ContentTemplate>

                    </asp:UpdatePanel>

                </ContentTemplate>

            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">

                <HeaderTemplate>

                    <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">

                        <tr>

                            <td>

                                <span id="Span3" onmouseover="changeTab(2)">影視</span>

                            </td>

                        </tr>

                    </table>                   

                </HeaderTemplate>

                <ContentTemplate><asp:UpdatePanel ID="UpdatePanel3" runat="server">

                    <ContentTemplate>

                        <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">

                            <tr>

                                <td>

                                    影視1<br />

                                    影視2</td>

                            </tr>

                        </table>

                    </ContentTemplate>

                </asp:UpdatePanel>

                </ContentTemplate>

            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel ID="TabPanel4" runat="server" HeaderText="TabPanel4">

                <HeaderTemplate>

                    <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">

                        <tr>

                            <td>

                                <span id="Span2" onmouseover="changeTab(3)">國際</span>   

                            </td>

                        </tr>

                    </table>

                   

                </HeaderTemplate>

                <ContentTemplate><asp:UpdatePanel ID="UpdatePanel4" runat="server">

                    <ContentTemplate>

                        <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">

                            <tr>

                                <td>

                                    國際1<br />

                                    國際2</td>

                            </tr>

                        </table>

                    </ContentTemplate>

                </asp:UpdatePanel>

                </ContentTemplate>

            </ajaxToolkit:TabPanel>

        </ajaxToolkit:TabContainer>

    </div>

    </form>

</body>

</html>

你可能感兴趣的:(JavaScript,Ajax,server,Yahoo,table,border)