CollapsiblePanel 示例

请按照你的感觉操作下面的内容,你就可以看到 CollapsiblePanel 的效果:
ASP.NET AJAX是什么?
(显示内容...)

ASP.NET AJAX 是一个以快速、方便地搭建新一代的强大、互动、个性化的、支持大多数浏览器的 AJAX 网页为目标的免费Framework。它集成了 Microsoft 浏览器客户端脚本资源和 ASP.NET 2.0 服务器端的方便的环境。

ASP.NET AJAX 是 ASP.NET 的一个扩展,采用了ASP.NET的服务器端开发环境,因而 ASP.NET AJAX 提供对于客户端脚本和强大的 ASP.Net 2.0 服务器端脚本的融合。使得你能够更方便地创建绚丽、互动的 Web 应用程序界面。

除此之外,AJAX 并不只局限于 ASP.NET,你同样可以只采用其强大的、适应于大多数浏览器的客户端脚本资源,建立客户端程序。

采用 ASP.Net AJAX 你需要作的,只是简单的拖拽几个控件到你的页面上,就可以使得你的 Web 页面具有精彩的新一代 AJAX 用户界面效果,同时大量地降低应用服务器层的资源消耗。


 CollapsiblePanel 概述

CollapsibePanel 可以使得你的网页用户很方便地折叠或者展开你网页上的任何一个部分,的 ASP.Net AJAX 控件。

它可以很方便地使得任何一个页面上的 ASP.net Panel 控件的具有此项折叠与展开功能, 开发人员需要作的,只是指定一个页面上的 Panel 控件为需要折叠展开功能的 Panel 为其TargetID, 同时还可以指定页面上的某一个控件是触发折叠展开功能的开关,或者指定当鼠标移动到某一区域的时候触发这项功能。

CollapsibePanel 的折叠于展开具有状态保持的效果,当网页被提交的时候,它将自动纪录与恢复其目标控件的折叠或者展开状态。 你可以尝试点击这里进行页面提交。

你也可以指定,当目标 Panel 展开的时候,如果面对其不具有所需要的展开空间时,是否出现滚动条,并且设置该滚动条在高度或者宽度上的数据。

注意:


CollapsiblePanel 必须采用标准的CSS格式, 早期的IE版本不支持这个控件的应用。
因而,你再你建立一个新页面的时候采用关键字!DOCTYPE进行申明,指定该页面应该被生成为标准的IE格式。对于 ASP.Net 所新建的页面其具有这项关键字的默认设置。


  CollapsiblePanel 属性

CollapsiblePanel 控件属性将被初始化如下面的示例代码所示,斜体属性为可选属性。

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
            TargetControlID="Panel1"
            CollapsedSize="0"
            ExpandedSize="300"
            Collapsed="True"
            ExpandControlID="LinkButton1"
            CollapseControlID="LinkButton1"
            AutoCollapse="False"
            AutoExpand="False"
            ScrollContents="True"
            TextLabelID="Label1"
            CollapsedText="Show Details..."
            ExpandedText="Hide Details" 
            ImageControlID="Image1"
            ExpandedImage="~/images/collapse.jpg"
            CollapsedImage="~/images/expand.jpg"
            ExpandDirection="Vertical" />
        
  • TargetControlID - 具有折叠和展开功能的 Panel 的 ID
  • CollapsedSize - 当目标 Panel 处于关闭状态时的尺寸大小,用像素 (px) 表示
  • ExpandedSize - 当目标 Panel 处于展开状态时的尺寸大小,用像素 (px) 表示
  • Collapsed - 标志该目标 Panel 将被初始化的状态是否为折叠状态,在上面的示例中,我们初始化 Panel 为关闭状态,而且关闭状态时的 Panel 高度为 0 所以在第一次打开这个页面的时候我们看不到 Panel
  • AutoCollapse - 如果设置为 True,当鼠标指针移出 Panel 区域的时候 Panel 将自动折叠
  • AutoExpand - 如果设置为 True,当鼠标移入到 Panel 区域的时候 Panel 将自动展开
  • ScrollContents - 如果设置为 True,当 Panel 的内容大于其本身的大小的情况下,将自动出现相适应的滚动条
  • ExpandControlID/CollapseControlID - 控制目标 Panel 的折叠或者展开状态的控件 ID, 当点击该控件的时候,目标 Panel 将呈现展开或者折叠的状态, 如果它们被设置为相同的控件,那么这个控件将根据他当前的状态进行改变,如上面示例所示
  • TextLabelID - 用于显示当前目标 Panel 折叠或者展开状态的 Label 控件 ID
  • CollapsedText - 折叠状态的描述,该描述将用于 TextLabelID 的 Text 属性,这个文本内容同样将是 ImageControlID (如果设置)的 AlternateText 属性值
  • ExpandedText - 展开状态的描述,该描述将用于 TextLabelID 的 Text 属性,这个文本内容同样将是 ImageControlID (如果设置) 的 AlternateText 属性值
  • ImageControlID - 用于用图标表示其展开或者折叠状态的 Image 控件 ID,该控件将自动根据其状态替换其图标为 CollapsedImage 属性指向的图片, 和 ExpandedImage 属性指向的图片。如果指定了 CollapsedText 和 ExpandedText 属性,它们将是该图标控件的 AlternateText 属性值
  • CollapsedImage - 当目标 Panel 被折叠的时候呈现的图片
  • ExpandedImage -当目标 Panel 被展开的时候呈现的图片
  • ExpandDirection - 可以设置为 "Vertical" 或者 "Horizontal" 标示目标 Panel 的展开方向

 相关问题

尚未纪录和本示例相关的问题,你可以直接在这里添加本示例的相关问题


登录本站,提出问题。一分钟注册

 Internet 相关资源


Copyright © 2007 AJAXASP.NET.CN 保留所有权利. 赞助本站