第十二篇: Ajax Control Toolkit 控件包--1. Accordion (多层折叠效果)

1. 新建 Web窗体:Accordion.aspx
2. 添加一个 ScriptManager 控件
3. 添加一个 Accordion 控件 (注意:拖动 Accordion 控件到窗体中时,窗体是什么也显示的,只在源码里增加代码)
Code
<body>
    
<form id="form1" runat="server">
    
<div>
    
        
<asp:ScriptManager ID="ScriptManager1" runat="server">
        
</asp:ScriptManager>
        
<br />
        
        
<cc1:Accordion ID="Accordion1" runat="server">
        
</cc1:Accordion>
        
<br />
        
<br />
    
    
</div>
    
</form>
</body>

4. 在 < cc1:Accordion ID = " Accordion1 "  runat = " server " > </ cc1:Accordion > 中添加 <Panes></Panes>

5.
在 <Panes></Panes> 中拖几个AccordionPane进去(你需要几层就拖几个)
Code
        <cc1:Accordion ID="Accordion1" runat="server">
        
<Panes>
            
<cc1:AccordionPane ID="AccordionPane1" runat="server">
            
</cc1:AccordionPane>
            
<cc1:AccordionPane ID="AccordionPane2" runat="server">
            
</cc1:AccordionPane>
            
<cc1:AccordionPane ID="AccordionPane3" runat="server">
            
</cc1:AccordionPane>
        
</Panes>
        
</cc1:Accordion>

6. 给 AccordionPanel 添加代码:
Code
        <cc1:Accordion ID="Accordion1" runat="server">
        
<Panes>
            
<cc1:AccordionPane ID="AccordionPane1" runat="server">
            
<Header>这里是标题1</Header>
            
<Content>这里是标题1 的内容</Content>
            
</cc1:AccordionPane>
            
<cc1:AccordionPane ID="AccordionPane2" runat="server">
            
<Header>这里是标题2</Header>
            
<Content>
                这里是标题2 的内容
                
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                
<asp:Button ID="Button1" runat="server" Text="Button" />
            
</Content>
            
</cc1:AccordionPane>
            
<cc1:AccordionPane ID="AccordionPane3" runat="server">
            
<Header>这里是标题3 </Header>
            
<Content>这里是标题3 的内容</Content>
            
</cc1:AccordionPane>
        
</Panes>
        
</cc1:Accordion>

7. OK,运行,已经可以用了,只是没有边框和顔色。


8. 现在要做的就是给标题加上边框的顔色。
    ① 打开 Accordion1 属性面板,设置大小, Height(300px) , Width(200px)
    ② 设置标题样式, HeaderCssClass(accordionHeader)
    ③ 设置内容样式, ContentCssClass(accordionContant)

8. 新建样式。
Code
    <style type="text/css">
        .accordionHeader
        {
            color: #FFFF00;
            background
-color: #3399FF;
            border: 1px solid #FF6600;
            padding: 1px;
            margin: 1px;
            cursor: pointer;
        }
        .accordionContent
        {
            background
-color: #FF9933;
            padding: 1px;
            margin: 1px;
        }
    
</style>

9. OK,试试看吧 !!!


转载于:https://www.cnblogs.com/LinFx/archive/2008/01/25/2123712.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值