AJAX ControlToolkit 系列之---CollapsiblePanelExtender

本文详细介绍了AJAX ControlToolkit中的CollapsiblePanelExtender组件,讲解了如何使用该组件实现面板的折叠与展开功能,包括客户端和服务器端的配置方法,以及与图像按钮的结合使用。
CollapsiblePanelExtender : 可层叠面版控件.

  之前看THC的教程时,发现他用网页做的"课堂教案"中有点特别的,就是点其中一 标题就可以隐藏或显示下一个层...觉得还蛮不错的,今天看了看AJAX ControlToolkit 的介绍发现用CollapsiblePanelExtender 就可以轻松实现此功能,呵呵,

  具体实现方法:

 1 ,在.NET2.0中新建AJAX工程, 拖入两个Panel和CollapsiblePanelExtender 控件( 这是最基本的),最好在第一个Panel中再加一个image和label....

  2,CollapsiblePanelExtender 属性介绍:

CollapsiblePanelExtender
 TargetControlID该属性指定一个Panel,该Panel就是CollapsiblePanel要扩展显示或折叠的内容面板,也就是刚开始隐藏的PAN
CollapseControlID该属性指定控制折叠的控件ID,就是单击该控件后隐藏panel就会隐藏
ExpandControlID该属性指定扩展的控件ID,就是单击该控件后隐藏panel就会显示
ExpandDirection 指定Panel的扩展方向。默认为:Vertical(向下)
TextLabelID指定一个控件,可以在扩展或折叠Panel时显示CollapsedText/ExpandedText中的内容。
CollapasedTextPanel折叠时的文本
ExpandedTextPanel扩展时的文本
Collapsed指定页面载入时Panel是折叠还是扩展  ,  true or false
ImageControlID指定一个控件,在扩展时显示ExpandedImage中的图像;在折叠时显示CollapsedImage中的图像
ExpandedImage在扩展时显示的图像。
CollapsedImage在折叠时显示的图像。
SuppressPostBack禁止回传  当然为true拉...

  

  CollapsiblePanelExtender的具体属性设置

 <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="Panelcontent" CollapseControlID="Panelheader" ImageControlID="Image1" Collapsed="true" CollapsedText="展开来" ExpandedText="隐藏起" TextLabelID="Lb_state" CollapsedImage="img/up.jpg" ExpandedImage="img/down.jpg" ExpandControlID="Panelheader">

3:页面总体属性:

未完 

更多内容请关注:www.dearming.cn

4:效果;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值