ajax 折叠,ASP.NET AJAX可折叠面板Accordion应用实例
通常來講,將一個(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: oracle会闪,oracle闪来
- 下一篇: getresourceasstream方