我的ASP.NET AJAX 学习--Accordion

最新推荐文章于 2025-09-03 19:09:26 发布

转载最新推荐文章于 2025-09-03 19:09:26 发布 · 61 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zbqy/archive/2007/05/07/737559.html

文章标签：

#xhtml #c# #ui

本文介绍了如何在ASP.NET页面中使用AjaxControlToolkit库中的Accordion控件实现内容的折叠与展开效果。通过设置Accordion的各项属性及配置AccordionPane，可以轻松创建交互式的折叠面板。

首先我们在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 是实现折叠效果

如图

%7B1274BF1B-3883-4301-8D28-8937E4E4EAD1%7D_thumb.png

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;
}