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

找到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;
}

?

轉載于:https://www.cnblogs.com/zhangliyu/archive/2009/07/07/1518752.html

總結

以上是生活随笔為你收集整理的ajax 中Accordion控件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。