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

简介:

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

Defalult.aspx的代码如下:

Default.aspx

      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

    导入的样式表如下:

    CSS

    最后运行效果如下:




    本文转自黄聪博客园博客,原文链接:http://www.cnblogs.com/huangcong/archive/2011/07/20/1774369.html,如需转载请自行联系原作者
    相关文章
    |
    设计模式 前端开发 JavaScript
    Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
    Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
    205 0
    |
    开发框架 JavaScript 前端开发
    震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
    【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
    238 8
    |
    开发框架 前端开发 JavaScript
    ASP.NET AJAX使用方法概述(三)
    ASP.NET AJAX使用方法概述(三)
    207 1
    |
    12月前
    |
    XML 前端开发 JavaScript
    Ajax与Axios,以及Apifox的入门使用
    本文由blue编写于2025年3月20日,主要介绍了Ajax、Axios以及Apifox的入门使用。文章首先讲解了Ajax的概念与作用,通过原生代码示例展示了如何实现异步数据交互;接着引入Axios,说明其对Ajax的封装简化了开发流程,并给出Axios实现相同功能的代码;最后详细讲述了Apifox的基本用法,包括创建接口、设置参数及生成Mock数据,为前后端开发提供了便利工具。
    379 0
    winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
    本文讨论了在基于.NET 6和.NET Framework的WinForms项目中添加图表控件的不同方法。由于.NET 6的WinForms项目默认不包含Chart控件,可以通过NuGet包管理器安装如ScottPlot等图表插件。而对于基于.NET Framework的WinForms项目,Chart控件是默认存在的,也可以通过NuGet安装额外的图表插件,例如LiveCharts。文中提供了通过NuGet添加图表控件的步骤和截图说明。
    winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
    |
    开发者 Windows
    .NET 开源扁平化、美观的 C/S 控件库
    【10月更文挑战第23天】介绍了三款适用于 .NET 平台的开源扁平化、美观的 C/S 控件库:MaterialSkin 采用 Google Material Design 风格,适合现代感界面;Krypton Toolkit 提供丰富控件,界面易于定制;Fluent Ribbon Control Suite 模仿 Office 界面,适合复杂功能应用。每款控件库均附有示例代码及 GitHub 链接。
    767 0
    |
    C# Android开发 iOS开发
    一组.NET MAUI绘制的开源控件 - AlohaKit
    一组.NET MAUI绘制的开源控件 - AlohaKit
    317 0
    |
    JSON 前端开发 JavaScript
    Django入门到放弃之ajax
    Django入门到放弃之ajax
    |
    XML JSON 前端开发
    Ajax – JSON入门指南
    Ajax – JSON入门指南
    229 1