ajax 中Accordion控件的使用

先在界面加载好第三方控件。

找到Accordion。在界面拖放好。

再找到Accordion的属性中的Panes，点击，添加需要的几项。

 

我添加了四项 ， 也就是说想要运行出来有4个选项 ，

剩下来的一些属性就不得不在代码中写了。

转换到源码中。

 

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

然后在这里面加入一些属性设置代码.

 <cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0"
             FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250"
              AutoSize="Limit" Height="300px" Width="200" HeaderCssClass="accordionHeader"
               ContentCssClass="accordionContent">

 

在<cc1:accordion>下<cc1:AccordionPane ID="AccordionPane5" runat="server" >上

加入 <Panes >

然后对AccordionPane 进行属性设置；

在AccordionPane里写:

  <Header >部门管理</Header><Content >添加部门<br/>删除部门</Content>

其他相同。

完整代码如下：

 

 <cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0"
             FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250"
              AutoSize="Limit" Height="300px" Width="200" HeaderCssClass="accordionHeader"
               ContentCssClass="accordionContent">
              
               <Panes >
                <cc1:AccordionPane ID="AccordionPane5" runat="server" >
               <Header>员工管理</a> </Header>
               <Content>添加员工<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://www.baidu.com/" Text="百度" />
                <br/>删除员工</Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane6" runat="server" ContentCssClass="" HeaderCssClass="">
                 <Header >部门管理</Header><Content >添加部门<br/>删除部门</Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane7" runat="server" ContentCssClass="" HeaderCssClass="">
                 <Header >考勤</Header>                
                <Content >上班 <br />下班</Content>
                </cc1:AccordionPane>
                </Panes>
            </cc1:Accordion>

 

 

结果如图:

 

 

附上样式表的代码吧：

body {
}

.accordionHeader
{
    border:1px solid #2F4F4F;
    background-color:#A6D0E6;
    font-family:华文新魏;
    font-size:16px;
    font-weight:bold;
    padding:5px;
    margin-top:5px;
}

.accordionContent
{
    border:1px dashed #2F4F4F;
    background-color:#FFFEDF;
    font-family:Arial;
    border-top:none;
    padding:5px;
    padding-top:10px;
}