AJAX Accordion 学习

 
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样式

静态绑定：

    <cc1:Accordion ID="Accordion1" runat="server"
    AutoSize="Limit"                                         
    FadeTransitions="true"
    FramesPerSecond="25"
    SuppressHeaderPostbacks="false"
    RequireOpenedPane="false"
    SelectedIndex="0"
    Width="200"
    HeaderCssClass="accordionHeader"
    HeaderSelectedCssClass="accordionHeaderSelected"
    ContentCssClass="accordionContent">                                上面的为Accordion的属性
    <Panes>        //这是在Accordion里添加一个面板
        <cc1:AccordionPane ID="AccordionPane1" runat="server">           //子面板
            <Header>h1</Header>      //子面板的属性  标题
            <Content>c1</Content>     //子面板的属性  内容
        </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane2" runat="server">
            <Header>h2</Header>
            <Content>c2</Content>
        </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane3" runat="server">
            <Header>h3</Header>
            <Content>c3</Content>
        </cc1:AccordionPane>
    </Panes>
    </cc1:Accordion>

 

动态数据库绑定

 

if (!Page.IsPostBack)
        {
            List<Category> cate = CategoryManager.SelectAll() as List<Category>;  //已有的得到产品类别的方法
            foreach (Category category in cate)
            {
                AccordionPane pane = new AccordionPane();    //实例化一个AccordionPane 面板容器
                HyperLink hlCategory = new HyperLink();         //实例化连接标签
                hlCategory.Text = category.CategoryName;
                hlCategory.NavigateUrl = string.Format("~/TestExercise/category.aspx?CategoryId={0}", category.CategoryId);                                                        //通过属性设施连接的位置和参数
                pane.HeaderContainer.Controls.Add(hlCategory);  //动态吧 Hyperlink添加到AccordionPane头部分

                List<Product> products = ProductManager.GetProductsByCategoryId(category.CategoryId) as List<Product>;                                                                  //得到已有的产品集合根据类别ID
                foreach (Product pro in products)
                {
                    HyperLink hlproduct = new HyperLink();
                   
                    hlproduct.Text = string.Format("{0}<br/>",pro.ProductName);
                    hlproduct.NavigateUrl = string.Format("~/TestExercise/product.aspx?ProductId={0}",pro.ProductName);
                    pane.ContentContainer.Controls.Add(hlproduct); //动态吧Hyperlink添加到AccordionPane正文部分
                }
                Accordion_Static.Panes.Add(pane); //Accordion添加面板容器的方法
            }
        }