記錄AJAX在VS2005中的使用第二編

        在建網站的時候一定要注意是建的是“ASP.NET AJAX-Enabled Web Site”不是ASP.NET 網站。否則要改Web.config，添加一些屬於AJAX的內容，爲了不在Web.config天津AJAX的信息，請在建網站的時候直接建立AJAX 的那個網站即可。

頁面的設計如下：

<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
           <cc1:TabContainer ID="tab" runat="server" CssClass="red">
                <cc1:TabPanel ID="TabPanel1"  runat="server" HeaderText="Opera">
                    <HeaderTemplate>
                           <div class="righttitle">文章管理</div>
                    </HeaderTemplate>
                    <ContentTemplate>
                         <div class="tblist1">
                             <asp:Repeater ID="rpt_info1" runat="server" >
                                <HeaderTemplate >                                                                
                                </HeaderTemplate>
                                <ItemTemplate>
                                  <div style="padding-bottom:10px;"></div> 
                                    <div class="rightline">111 </div>
                                        <div style="padding-bottom:10px;"></div> 
                                      <asp:Repeater ID="rpt_info4" runat="server" >
                                        <HeaderTemplate >  
                                        <div class="tabpic">                      
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                          <div class="pic">
                                            <div style=" border:solid 1px #9697AC;"></div>
                                            <div style="padding-bottom:10px;"></div>
                                            <div style="padding-bottom:10px;"><a href="info.aspx" target="_blank">名稱</a></div>
                                          </div>                    
                                       </ItemTemplate>
                                       <FooterTemplate>
                                         </div>
                                       </FooterTemplate>
                                    </asp:Repeater>
                        
                               </ItemTemplate>
                               <FooterTemplate>                           
                               </FooterTemplate>
                            </asp:Repeater>
                            </div>
                    </ContentTemplate>
                    </cc1:TabPanel>

 

樣式表設計如下：

.red .ajax__tab_header
{
    background:url(../Images/red_bg.gif) repeat-x;
}
.red .ajax__tab_hover .ajax__tab_outer,
.red .ajax__tab_active .ajax__tab_outer
{
  
   background:url(../Images/red_left.gif) no-repeat left top;
}
.red .ajax__tab_hover .ajax__tab_inner,
.red .ajax__tab_active .ajax__tab_inner
{
    background:url(../Images/red_right.gif) no-repeat right top;
}

 

樣式表格的設計如下：

/* ajax__tab_xp-theme theme */
.ajax__tab_default .ajax__tab_header
{
 font-size:13px;
 font-weight:bold;
 color:#000;
    font-family:sans-serif;
}
.ajax__tab_default .ajax__tab_active .ajax__tab_outer,
.ajax__tab_default .ajax__tab_header .ajax__tab_outer,
.ajax__tab_default .ajax__tab_hover .ajax__tab_outer
{
    height:46px;
}
.ajax__tab_default .ajax__tab_active .ajax__tab_inner,
.ajax__tab_default .ajax__tab_header .ajax__tab_inner,
.ajax__tab_default .ajax__tab_hover .ajax__tab_inner
{
    height:46px;
    margin-left:16px; /* offset the width of the left image */
}
.ajax__tab_default .ajax__tab_active .ajax__tab_tab,
.ajax__tab_default .ajax__tab_hover .ajax__tab_tab,
.ajax__tab_default .ajax__tab_header .ajax__tab_tab
{
 margin:16px 16px 0px 0px;
}
.ajax__tab_default .ajax__tab_hover .ajax__tab_tab,
.ajax__tab_default .ajax__tab_active .ajax__tab_tab
{
 color:#fff;
}

.ajax__tab_default .ajax__tab_body
{
    font-family:verdana,tahoma,helvetica;
    font-size:10pt;
    border:1px solid #999999;
    border-top:0;
    padding:8px;
    background-color:#ffffff;
}

詳細的內容我已經上傳在附件上了。有興趣者可以看看。