ASP.NET AJAX入门系列(2) Accordion控件

简介:

今天开始第一个控件:Accordion,Accordion 是一个可以让你在你的 Web 页面方便地开发类似 Outlook 工具栏的 ASP.Net AJAX 控件。 它可以使得你的页面用户方便地展开或者关闭一系列页面元素的显示.

Defalult.aspx的代码如下:

ContractedBlock.gif Default.aspx

2010070920270315.png

      Accordion可设置的属性如下:

  • SelectedIndex - 当 Accordion 被初始化的 AccordionPane 页面 ID
  • HeaderCssClass - 每一个 AccordionPane 标题的 Css 样式。在开发中,我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此,另外还可以为每一个 AccordionPane 单独指定其 Css 样式。
  • HeaderSelectedCssClass - 当某一个 AccordionPane 被选中的时候,其标题的 Css 样式。在开发中,我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此,另外还可以为每一个 AccordionPane 单独指定其 Css 样式。
  • ContentCssClass - 每一个 AccordionPane 内容的 Css 样式。在开发中,我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此,另外还可以为每一个 AccordionPane 单独指定其 Css 样式。
  • FadeTransitions - 如果设置为 True 那么在其选中的 AccordionPane 变化时将出现渐变的效果。
  • TransitionDuration - 用毫秒表示的渐变效果显示的时间。
  • AutoSize - 设置 Accordion 的显示和排版方式。

              None - Accordion 在其展开或者折叠过程中,将根据它内部显示的内容自动尺寸的变化,不受到任何的条件限制。 如果将 AutoSize 属性设置为 None 它将可能造成页面上的其它元素跟随 Accordion 的尺寸变化产生向上或者向下的移动。

              Limit - 它将使得 Accordion 控件永远不能将它的尺寸扩展到规定的高度(Height)属性之外, 如果将 AutoSize 属性设置为 Limit,可能会造成在某种情况下,它里面的内容需要通过滚动条来滚动。 
              Fill - 它将使得 Accordion 控件永远都保持在其高度(Height)属性规定的高度。

  • RequireOpenedPane - 如果设置为 True 将可以避免当前展开的 AccordionPane 被折叠。
  • SuppressHeaderPostbacks - 如果设置为 True 将可以避免 AccordionPane 的标题部分被点击触发的页面提交事件。
  • Panes - AccordionPane 的集合表示
  • HeaderTemplate - 当采用数据绑定方式时的标题模板
  • ContentTemplate - 当采用数据绑定方式时的内容模板
  • DataSource - 数据源
  • DataSourceID - 数据源控件 ID

导入的样式表如下:

ContractedBlock.gif CSS

最后运行效果如下:

2010070920292716.png

2010070920293857.png

2010070920294739.png




本文转自黄聪博客园博客,原文链接:http://www.cnblogs.com/huangcong/archive/2011/07/20/1774369.html,如需转载请自行联系原作者
相关文章
|
2月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
22 0
|
3月前
|
开发框架 前端开发 .NET
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
|
3月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
58 1
|
29天前
|
开发框架 .NET 物联网
.NET从入门到精通,零基础也能搞定的基础知识教程
.NET从入门到精通,零基础也能搞定的基础知识教程
20 0
|
1月前
|
XML 开发框架 .NET
C# .NET面试系列八:ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分:ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET(通用语言运行时): ```c# 定义:.NET 是一个软件开发框架,提供了一个通用的运行时环境,用于在不同的编程语言中执行代码。 作用:它为多语言支持提供了一个统一的平台,允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库(BCL)和其他工具。 ``` C#(C Sharp): ```c# 定义: C# 是一种由微软设计的面向对象的编程语言,专门为.NET 平台开发而创建。 作
174 2
|
2月前
|
开发框架 .NET 程序员
C#/.NET该如何自学入门?
C#/.NET该如何自学入门?
|
2月前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
34 0
|
3月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
15 1
|
3月前
|
前端开发 JavaScript fastjson
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(上)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
24 1
|
4月前
|
XML API 数据库
七天.NET 8操作SQLite入门到实战 - 第六天后端班级管理相关接口完善和Swagger自定义配置
七天.NET 8操作SQLite入门到实战 - 第六天后端班级管理相关接口完善和Swagger自定义配置