通常來講，將一個(gè)無比長的列表直接顯示給用戶是一種極不禮貌的行為。對(duì)此，解決方案有很多，歸類顯示就是其中之一。類似我們常見的QQ或MSN

Message的聯(lián)系人歸類等，系統(tǒng)將用戶管理中心的操作菜單歸類顯示，并應(yīng)用背景圖片，使得窗口的界面變得井井有條、豐富漂亮，用戶也能夠以最快的速度找到想要的操作項(xiàng)。

應(yīng)用AjaxControlToolkit的Accordion控件實(shí)現(xiàn)此功能。實(shí)現(xiàn)時(shí)，首先對(duì)可折疊面板整體、頭部、內(nèi)容以及鏈接的樣式進(jìn)行設(shè)置，應(yīng)用CSS樣式表。

.accordion{

height:400px; }

.accordion

.acheader{

background-image:url('../Images/site/center.png');padding :8px;

cursor :pointer ;

margin-bottom:2px;?color

:#8db9e5;}

.accordion

.accontent{ padding:0 2px 2px 20px; }

.accordion a{

text-decoration :none; color :Green ;}

然后向頁面中添加Accordion控件，通過向Accordion的Panes屬性中添加多個(gè)AccordionPane，實(shí)現(xiàn)多個(gè)導(dǎo)航菜單的展開與折疊，可以根據(jù)系統(tǒng)需要進(jìn)行設(shè)置，并在CssClass、HeaderCssClass、ContenCssClass屬性中分別指明相應(yīng)的CSS類標(biāo)簽名稱。AccordionPane的Header屬性指定折疊面板的頭部信息，Content指定展開面板時(shí)元素內(nèi)部顯示的內(nèi)容，這里對(duì)每個(gè)操作項(xiàng)設(shè)置了小圖標(biāo)以美化界面。

ID="Accordion1" runat="server" CssClass

="accordion"

FadeTransitions ="false" HeaderCssClass ="acheader"

ContentCssClass ="accontent">

>

ID="AccordionPane1" runat="server">

>日志管理

src ="../Images/back/backli2.png"

/>??

="../WebUI/AddArticle.aspx">發(fā)表日志

/>

/>??

="../WebUI/ArtCenter.aspx">管理日志

…

運(yùn)行效果如圖:

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的ajax 折叠,ASP.NET AJAX可折叠面板Accordion应用实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。