Generated Image

我的ASP.NET AJAX 学习--Accordion

首先我们在web.config 中
添加对AtlasControlToolKit的引用
 
<pages>
<controls> 

<add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit"
tagPrefix="ajaxToolkit"/>
<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, 
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</controls>
</pages>
 
Accordion 是实现折叠效果
如图
Accordion可以包括多个Pane，每次显示一个，其他的pane折叠起来。Accordion中包含多个Accordionpane来实现其功能。
 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordion.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Accordion 简单应用 Page</title>
    <link href="Accordion.css" rel="stylesheet" type="text/css" />
</head>
 
 
<body>
    <form id="form1" runat="server">
     <div class="demoarea">
        <div class="demoheading">Accordion 简单应用</div>
         <asp:ScriptManager ID="ScriptManager1" runat="server">
         </asp:ScriptManager>
         <table style="width: 437px; position: relative; height: 68px; left: 0px; top: 0px;">
             <tr>
                 <td colspan="3" rowspan="3" style="width: 155px">
    
   <ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"
            HeaderCssClass="accordionHeader" ContentCssClass="accordionContent"
            FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" style="position: relative; 
left: 4px; top: 2px;">
           <Panes>
            <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                <Header><a href="" onclick="return false;" class="accordionLink">公司简介</a></Header>
                <Content>
 
              <a href= "http://zbqy.cnblogs.com" >  北京桂圆</a>   </Content>
            </ajaxToolkit:AccordionPane>
            <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                <Header><a href="" onclick="return false;" class="accordionLink">产品展示</a></Header>
                <Content>
                 <asp:Image  ImageUrl =http://www.h-master.net/web2.0/image/(reflect)zbqy.cnblogs.comBETA.png 
runat="server" SkinID="qq1" />
                </Content>
            </ajaxToolkit:AccordionPane>
            <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
                <Header><a href="" onclick="return false;" class="accordionLink">公司排名</a></Header>
                <Content>
                 <asp:Image ID="Image1"  ImageUrl =http://www.h-master.net/web2.0/image/(reflect)zbqy.cnblogs.comBETA.png 
runat="server" SkinID="qq1" />
                </Content>
            </ajaxToolkit:AccordionPane>
            </Panes>
        </ajaxToolkit:Accordion>
                 </td>
             </tr>
             <tr>
             </tr>
             <tr>
             </tr>
         </table>
        
 
 
    </div>
         </form>
</body>
</html>

 

 

 

 

Accordion.css 

/******************************/
/**Styling information specific to individual content pages**/

/* Accordion */
.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
	font-family: Arial, Sans-Serif;
	font-size: 12px;
	font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionHeader a
{
	color: #FFFFFF;
	background: none;
	text-decoration: none;
}

.accordionHeader a:hover
{
	background: none;
	text-decoration: underline;
}

.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}
posted @ 2007-05-07 03:58  桂圆  阅读(1352)  评论(1)  编辑  收藏  举报