一路向前走

其中的代码,如果您有更好的改进,请一定提出您的宝贵意见及建议

  :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: :: 管理 ::
  91 随笔 :: 3 文章 :: 94 评论 :: 0 引用

1.功能描述

功能类似于TAB选项卡,可以将一组功能相似任务相同的内容放在选项卡内,然后通过选项卡的标题查看各组内容. 就像我们VS开发工具中的工具栏.

 

2.属性说明

SelectedIndex:已显示的AccordionPane控件的索引号.

HeaderCssClass:作用于标题的CSS样式.可以指定Accordion控件的HeraderCssClass属性,以此作为所有AccordionPane控件的默认属性值.或者直接指定定单独的AccordionPane控件的HeraderCssClass属性.

ContentCssClass:用于显示内容的CSS样式.使用方法类似于HeaderCssClass.

FadeTransitions:为true时是渐变效果(在伸缩时颜色变淡,伸缩完成后恢复正常);为false时是标准变换.

TransitionDuration:在选择一标题后伸展和收缩过渡动画持续的时间,单位为毫秒.

FramesPerSecond:用于伸展和收缩过渡动画每秒所需要的帧数.

AutoSize:用于限制Accordion控件展开的高度.None:没有限制;Limit:不能超过控件的最开始设置高度.如果显示内容太多则会出现滚动条.Fill:始终精确保持和高度设置一样的尺寸.

Panes:AccordionPane控件集合.

HeaderTemplate:标题模板,其中包含的标记用于进行数据绑定来显示面板标题.

ContentTemplate:内容模板,其中包含的标记用于进行数据绑定来显示面板内容.

DataSource:指定数据源,必须要调用DataBind()方法进行数据绑定.

DataSourceID:用数据源的ID来指定一个数据源.

DataMember:当使用DataSourceID来指定数据源时用于绑定的成员.

 

3.实例代码

代码
<style>
.Watermark
{
    background-color
:#FF762D;
    color
:#ffffff;
}

.accordion 
{   
           width
: 400px;   
        
}   
           
       .accordionHeader 
{   
            border
: 1px solid #2F4F4F;   
            color
: white;   
            background-color
: #2E4d7B;   
            font-family
: Arial, Sans-Serif;   
            font-size
: 12px;   
            font-weight
: bold;   
            padding
: 5px;   
            margin-top
: 5px;   
            cursor
: pointer;   
        
}   
           
        .accordionHeaderSelected 
{   
            border
: 1px solid #2F4F4F;   
            color
: white;   
            background-color
: #5078B3;   
            font-family
: Arial, Sans-Serif;   
            font-size
: 12px;   
            font-weight
: bold;   
            padding
: 5px;   
            margin-top
: 5px;   
            cursor
: pointer;   
        
}   
           
       .accordionContent 
{   
            background-color
: #D3DEEF;   
            border
: 1px dashed #2F4F4F;  
            border-top
: none;   
            padding
: 5px;   
            padding-top
: 10px;   
        
}   
</style>

 

 

代码
<asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0" FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true"
     CssClass
="accordion" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent">
        
<Panes>
           
<asp:AccordionPane runat="server" ID="AccordionPane1">
             
<Header>AJAX Extensions</Header>
             
<Content>
             
<href="#">Pointer</a>
             
<div class="line"><span></span></div>
             
<href="#">ScriptManager</a>
             
<div class="line"><span></span></div>
             
<href="#">ScriptManagerProxy</a>
             
<href="#">Timer</a>
             
<div class="line"><span></span></div>
             
<href="#">UpdatePanel</a>
             
<div class="line"><span></span></div>
             
<href="#">UpdateProgress</a>
             
<div class="line"><span></span></div>
             
</Content>
           
</asp:AccordionPane>
           
           
<asp:AccordionPane runat="server" ID="AccordionPane3">
             
<Header>Dynamic Data</Header>
             
<Content>
             
<href="#">Pointer</a>
             
<div class="line"><span></span></div>
             
<href="#">DynamicControl</a>
             
<div class="line"><span></span></div>
             
<href="#">DynamicDataManager</a>
             
<div class="line"><span></span></div>
             
<href="#">DynamicEntity</a>
             
<div class="line"><span></span></div>
             
<href="#">DynamicFilter</a>
             
<div class="line"><span></span></div>
             
<href="#">DynamicHyperLink</a>
             
<div class="line"><span></span></div>
             
<href="#">DynamicVlidator</a>
             
<div class="line"><span></span></div>
             
</Content>
           
</asp:AccordionPane>
           
<asp:AccordionPane runat="server" ID="AccordionPane2">
             
<Header>HTML</Header>
             
<Content>
             
<href="#">Pointer</a>
             
<div class="line"><span></span></div>
             
<href="#">Input(Button)</a>
             
<div class="line"><span></span></div>
             
<href="#">Input(Reset)</a>
             
<div class="line"><span></span></div>
             
<href="#">Input(Submit)</a>
             
<div class="line"><span></span></div>
             
<href="#">Input(Text)</a>
             
<div class="line"><span></span></div>
             
<href="#">Input(File)</a>
             
<div class="line"><span></span></div>
             
<href="#">Input(Password)</a>
             
<div class="line"><span></span></div>
             
<href="#">Input(Radio)</a>
             
<div class="line"><span></span></div>
             
<href="#">Input(Hidden)</a>
             
<div class="line"><span></span></div>
             
<href="#">Textarea</a>
             
<div class="line"><span></span></div>
             
<href="#">Table</a>
             
<div class="line"><span></span></div>
             
<href="#">Image</a>
             
<div class="line"><span></span></div>
             
<href="#">Select</a>
             
<div class="line"><span></span></div>
             
<href="#">Horizontal Rule</a>
             
<div class="line"><span></span></div>
             
<href="#">Div</a>
             
<div class="line"><span></span></div>
             
</Content>
           
</asp:AccordionPane>
        
</Panes>
        
    
</asp:Accordion>

 

 

4.碰到的问题

5.总结

6.参考文档:

http://www.asp.net/ajaxlibrary/act_Accordion.ashx

posted on 2010-05-22 11:57 Adair 阅读(...) 评论(...) 编辑 收藏