先在界面加载好第三方控件。
找到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;
}