首页 > 其他分享 >六、Accordion——手风琴方格(我叫它,可折叠面板列表)

六、Accordion——手风琴方格(我叫它,可折叠面板列表)

时间:2022-12-08 11:06:52浏览次数:31  
标签:Accordion true ht content header Add 手风琴 面板 可折叠


 

Accordion是一个可折叠的面板列表,每个面板都由header和content两个部分组成,header部分是始终显示的,当点击header后则会展开或折叠起其对应的content部分,但每次对多只能打开一个content,这有点像DropDownList。

 

举例说明:

1.       静态可折叠面板列表

1)       在页面的最上方添加ScriptManager,因为所有的Ajax control toolkit都需要它

2)       拖入一个Accordion控件,并在<Panes>节中拖入AccordionPane控件,如下:

        <asp:Accordion ID="Accordion1" runat="server"

HeaderCssClass="header"        //统一设置各个折叠面板header的样式

HeaderSelectedCssClass="headerSelected"         //统一设置各个折叠面板header被选中时的样式

ContentCssClass="content"        //统一设置各个折叠面板content的样式

                       SelectedIndex="0"           //默认打开的折叠面板的索引

                       AutoSize="None"        //设计控件中Panel的显示方式,主要有3种,即None(无限制的拉伸和收缩),Limit(限制内容的高度),Fill(内容高度与控件本身高度一样)

                       RequireOpenedPane="false"        //当被展开的面板header被点击时是否收缩content,false:收缩;true:不收缩

                       SuppressHeaderPostbacks="true"        //当header为按钮或链接等时,是否被使用,true:不使用;false:使用

                       FadeTransitions="true"        //展开或收缩面板时,是否使用动画效果,当为true时,下面的两个设置才有意义

                       FramesPerSecond="39"        //展开或收缩面板时,每秒显示的帧数

                       TransitionDuration="250">        //展开或收缩面板时的整个过程的持续时间

            <Panes>     //各个面板的容器

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

                    <Header><a href="http://www.hao123.com">111111111111111111111111111111111</a></Header>

                    <Content>dddddddddd<br /><br /><br /><br /><br /><br /><br /><br />1111111111111111111</Content>

                </asp:AccordionPane>

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

                    <Header><a href="http://www.hao123.com">111111111111111111111111111111111</a></Header>

                    <Content>dddddddddd<br /><br /><br /><br /><br /><br /><br /><br />1111111111111111111</Content>

                </asp:AccordionPane>

                <asp:AccordionPane ID="AccordionPane3" runat="server">

                    <Header><a href="http://www.hao123.com">111111111111111111111111111111111</a></Header>

                    <Content>dddddddddd<br /><br /><br /><br /><br /><br /><br /><br />1111111111111111111</Content>

                </asp:AccordionPane>

            </Panes>

        </asp:Accordion>

3)       请自己简单的设置header、headerSelected和content样式对于的值,然后查看效果

 

2.       动态可折叠面板列表

1)       再往页面中拖入一个Accordion控件,如下:

  

<asp:Accordion ID="Accordion2" runat="server" HeaderCssClass="header" HeaderSelectedCssClass="headerSelected" ContentCssClass="content"
SelectedIndex="0"
AutoSize="None"
FadeTransitions="true"
FramesPerSecond="39"
TransitionDuration="250"
RequireOpenedPane="false"
SuppressHeaderPostbacks="true">
</asp:Accordion>

2)       打开cs页面,并编写代码如下:

  

if (!IsPostBack)
{
Hashtable ht = new Hashtable();
ht.Add("dynamicGenerator_0", "dynamicGenerator<br/><br/><br/><br/><br/><br/><br/><br/>dynamicGenerator");
ht.Add("dynamicGenerator_1", "dynamicGenerator<br/><br/><br/><br/><br/><br/><br/><br/>dynamicGenerator");
ht.Add("dynamicGenerator_2", "dynamicGenerator<br/><br/><br/><br/><br/><br/><br/><br/>dynamicGenerator");
ht.Add("dynamicGenerator_3", "dynamicGenerator<br/><br/><br/><br/><br/><br/><br/><br/>dynamicGenerator");
ht.Add("dynamicGenerator_4", "dynamicGenerator<br/><br/><br/><br/><br/><br/><br/><br/>dynamicGenerator");
ht.Add("dynamicGenerator_5", "dynamicGenerator<br/><br/><br/><br/><br/><br/><br/><br/>dynamicGenerator");

foreach (DictionaryEntry de in ht)
{
string header = de.Key.ToString();
string content = de.Value.ToString();

AjaxControlToolkit.AccordionPane ap = new AjaxControlToolkit.AccordionPane();
ap.ID = "dynamicGenerator_" + Guid.NewGuid().ToString();
Label lab_header = new Label();
lab_header.Text = header;
ap.HeaderContainer.Controls.Add(lab_header);

Label lab_content = new Label();
lab_content.Text = content;
ap.ContentContainer.Controls.Add(lab_content);
Accordion2.Panes.Add(ap);
}
}

3)       然后打开页面查看,数据源当然也可以从数据库中读取,截图如下:


六、Accordion——手风琴方格(我叫它,可折叠面板列表)_string

标签:Accordion,true,ht,content,header,Add,手风琴,面板,可折叠
From: https://blog.51cto.com/u_15906220/5920729

相关文章