.net3.5 和vs2008中Ajax控件的使用--Accordion(可折叠)控件

(1)Accordion 控件重要属性介绍       a )RequireOpenedPane:当单击控件的 Pane 中的 header 时，是否关闭打开的 Pane。当值为 True 时，则不关闭该 Pane;当值为 False 时，则关闭该 Pane。       b )SuppressHeaderPostBacks:当在客户端单击控件的 Pane 中的 header 中的元素时，是否阻止其进行回传。当值为 True 时，则阻止其回传；当值为 False 时，则不阻止其回传。       c )FadeTransitions:当值为 True 时，则使用淡入淡出的转化效果；当值为 False 时，则使用标准的转化效果。       d )TransitionDuration:设定转换的时间(或速度)。数值越小，转换越快；数值越大，转换越慢。       e )FramesPerSecond:每秒的帧数。       f )SelectedIndex:设定页面初始导入时显示的 Pane。值为0，为第一个；值为1，为第二个。       g )HeaderCssClass:设定 Pane 中 header 的 css 样式。       h )ContentCssClass:设定 Pane 中 Content 的 css 样式。

(2)Accordion控件的使用

    a、在vs2008中新建web站点，在站点中添加新项--“Ajax web 窗体”，将其命名为Accordion.aspx,图示如下：

b、在Accordion.aspx页面上拖放一个Accordion控件，在源代码页面就会添加下面两句话：

//用于注册该控件包

view plain copy to clipboard print ?

1. <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>  

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

//Accordion控件

view plain copy to clipboard print ?

1. <cc1:Accordion ID="Accordion1" runat="server">   
2.   
3.    </cc1:Accordion>  

 <cc1:Accordion ID="Accordion1" runat="server">

    </cc1:Accordion>

ｃ、在 Accordion 中添加 Pane。在 Accordion 中先添加一个 Panes 标记。然后可以拖放一个 AccordionPane 到 Panes 中或者直接在 Panes 中添加 AccordionPane。得如下代码：

view plain copy to clipboard print ?

1. <Panes>   
2.   
3.       <cc1:AccordionPane ID="AccordionPane1" runat="server">   
4.   
5.            <Header>1. Accordion</Header>   
6.   
7.                <Content>   
8.   
9.                    The Accordion is a web control that allows you to provide multiple panes and display them one at a time.   
10.   
11.                    It is like having several   
12.   
13.                    where only one can be expanded at a time.  The Accordion is implemented as a web control that contains   
14.   
15.                    AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content.   
16.   
17.                    We keep track of the selected pane so it stays visible across postbacks.   
18.   
19.                </Content>   
20.   
21.            </cc1:AccordionPane>   
22.   
23.            <cc1:AccordionPane ID="AccordionPane2" runat="server">   
24.   
25.            <Header>1. Accordion</Header>   
26.   
27.                <Content>   
28.   
29.                    The Accordion is a web control that allows you to provide multiple panes and display them one at a time.   
30.   
31.                    It is like having several   
32.   
33.                    where only one can be expanded at a time.  The Accordion is implemented as a web control that contains   
34.   
35.                    AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content.   
36.   
37.                    We keep track of the selected pane so it stays visible across postbacks.   
38.   
39.                </Content>   
40.   
41.            </cc1:AccordionPane>   
42.   
43.       </Panes>  

 <Panes>

       <cc1:AccordionPane ID="AccordionPane1" runat="server">

            <Header>1. Accordion</Header>

                <Content>

                    The Accordion is a web control that allows you to provide multiple panes and display them one at a time.

                    It is like having several

                    where only one can be expanded at a time.  The Accordion is implemented as a web control that contains

                    AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content.

                    We keep track of the selected pane so it stays visible across postbacks.

                </Content>

            </cc1:AccordionPane>

            <cc1:AccordionPane ID="AccordionPane2" runat="server">

            <Header>1. Accordion</Header>

                <Content>

                    The Accordion is a web control that allows you to provide multiple panes and display them one at a time.

                    It is like having several

                    where only one can be expanded at a time.  The Accordion is implemented as a web control that contains

                    AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content.

                    We keep track of the selected pane so it stays visible across postbacks.

                </Content>

            </cc1:AccordionPane>

       </Panes>

d、在 Accordion 中添加 css 样式，设定一些属性值。最终代码如下：

view plain copy to clipboard print ?

1. <div id="container">   
2.   
3.     <cc1:Accordion ID="Accordion1" runat="server"  SelectedIndex="0"  
4.   
5.             HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"  
6.   
7.             ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"    
8.   
9.             TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">   
10.   
11.        <Panes>   
12.   
13.        <cc1:AccordionPane ID="AccordionPane1" runat="server">   
14.   
15.             <Header>1. Accordion</Header>   
16.   
17.                 <Content>   
18.   
19.                     The Accordion is a web control that allows you to provide multiple panes and display them one at a time.   
20.   
21.                     It is like having several   
22.   
23.                     where only one can be expanded at a time.  The Accordion is implemented as a web control that contains   
24.   
25.                     AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content.   
26.   
27.                     We keep track of the selected pane so it stays visible across postbacks.   
28.   
29.                 </Content>   
30.   
31.             </cc1:AccordionPane>   
32.   
33.             <cc1:AccordionPane ID="AccordionPane2" runat="server">   
34.   
35.             <Header>1. Accordion</Header>   
36.   
37.                 <Content>   
38.   
39.                     The Accordion is a web control that allows you to provide multiple panes and display them one at a time.   
40.   
41.                     It is like having several   
42.   
43.                     where only one can be expanded at a time.  The Accordion is implemented as a web control that contains   
44.   
45.                     AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content.   
46.   
47.                     We keep track of the selected pane so it stays visible across postbacks.   
48.   
49.                 </Content>   
50.   
51.             </cc1:AccordionPane>   
52.   
53.        </Panes>   
54.   
55.     </cc1:Accordion>   
56.   
57.     </div>  

<div id="container">

    <cc1:Accordion ID="Accordion1" runat="server"  SelectedIndex="0"

            HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"

            ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" 

            TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">

       <Panes>

       <cc1:AccordionPane ID="AccordionPane1" runat="server">

            <Header>1. Accordion</Header>

                <Content>

                    The Accordion is a web control that allows you to provide multiple panes and display them one at a time.

                    It is like having several

                    where only one can be expanded at a time.  The Accordion is implemented as a web control that contains

                    AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content.

                    We keep track of the selected pane so it stays visible across postbacks.

                </Content>

            </cc1:AccordionPane>

            <cc1:AccordionPane ID="AccordionPane2" runat="server">

            <Header>1. Accordion</Header>

                <Content>

                    The Accordion is a web control that allows you to provide multiple panes and display them one at a time.

                    It is like having several

                    where only one can be expanded at a time.  The Accordion is implemented as a web control that contains

                    AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content.

                    We keep track of the selected pane so it stays visible across postbacks.

                </Content>

            </cc1:AccordionPane>

       </Panes>

    </cc1:Accordion>

    </div>

e、附上css样式表

view plain copy to clipboard print ?

1.  <style>   
2.   
3.  .accordionHeader   
4.   
5. {   
6.   
7.     border: 1px solid #2F4F4F;   
8.   
9.     color: white;   
10.   
11.     background-color: #2E4d7B;   
12.   
13.     font-family: Arial, Sans-Serif;   
14.   
15.     font-size: 12px;   
16.   
17.     font-weight: bold;   
18.   
19.     padding: 5px;   
20.   
21.     margin-top: 5px;   
22.   
23.     cursor: pointer;   
24.   
25. }   
26.   
27. .accordionContent   
28.   
29. {   
30.   
31.     background-color: #D3DEEF;   
32.   
33.     border: 1px dashed #2F4F4F;   
34.   
35.     border-top: none;   
36.   
37.     padding: 5px;   
38.   
39.     padding-top: 10px;   
40.   
41. }   
42.   
43. .accordionHeaderSelected   
44.   
45. {   
46.   
47.     border: 1px solid #2F4F4F;   
48.   
49.     color: white;   
50.   
51.     background-color: #5078B3;   
52.   
53.     font-family: Arial, Sans-Serif;   
54.   
55.     font-size: 12px;   
56.   
57.     font-weight: bold;   
58.   
59.     padding: 5px;   
60.   
61.     margin-top: 5px;   
62.   
63.     cursor: pointer;   
64.   
65. }   
66.   
67. body   
68.   
69. { font-size:12px;}  
70.  
71. #container   
72.   
73. {   
74.   
75.      width:400px;}   
76.   
77.     </style>  

 <style>

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

}

.accordionContent

{

    background-color: #D3DEEF;

    border: 1px dashed #2F4F4F;

    border-top: none;

    padding: 5px;

    padding-top: 10px;

}

.accordionHeaderSelected

{

    border: 1px solid #2F4F4F;

    color: white;

    background-color: #5078B3;

	font-family: Arial, Sans-Serif;

	font-size: 12px;

	font-weight: bold;

    padding: 5px;

    margin-top: 5px;

    cursor: pointer;

}

body

{ font-size:12px;}

#container

{

	 width:400px;}

    </style>

f、最终效果图如下：