Accordion与AccordionPane的用法

最新推荐文章于 2012-10-10 13:45:14 发布

stromboy007

最新推荐文章于 2012-10-10 13:45:14 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ajax ControlToolkit 文章标签： server header asp html div

本文链接：https://blog.youkuaiyun.com/stromboy007/article/details/3899027

Ajax ControlToolkit 专栏收录该内容

17 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用Accordion组件来组织网页内容。示例中包含了多个章节，每个章节都可以通过点击标题进行展开和收起，方便用户浏览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Accordion与AccordionPane的用法</title>
    <style type="text/css">
    .Header
    {
    font-size:12px;
    color:#ffffff;
    background:#666666;
    font-weight:bold;
    }
    .Content
    {
    font-size:14px;
    color:#003366;
    background:#ffffcc;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
          <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <div>
    <cc1:Accordion ID="Accordion1" runat="server"   ContentCssClass="Content" HeaderCssClass="Header" FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250">
   <Panes>
        <cc1:AccordionPane runat="server" ID="AccordionPane4">
        <Header>第一章</Header>
        <Content>
        这里是第一章的故事：从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。   <br />
        </Content>
            </cc1:AccordionPane>
                    <cc1:AccordionPane ID="AccordionPane1" runat="server">
        <Header>第二章</Header>
        <Content>
        这里是第二章的故事：从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。   <br />
        </Content>
            </cc1:AccordionPane>
                    <cc1:AccordionPane ID="AccordionPane2" runat="server">
        <Header>第三章</Header>
        <Content>
        这里是第三章的故事：从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。 <br />
        </Content>
            </cc1:AccordionPane>
                    <cc1:AccordionPane ID="AccordionPane3" runat="server">
        <Header>第四章</Header>
        <Content>
        这里是第四章的故事：从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。   <br />
        </Content>
            </cc1:AccordionPane>
   </Panes>

    </cc1:Accordion>
    </div>
    </form>
</body>
</html>