ajaxControlToolkit面板类控件

Asp.net ajax ajaxControlToolkit 提供了许多非常方便的控件，可以实现非富有多彩的特效，这些特效大致可以分为对文本框效果、菜单特效、面板特效、动画和图像效果等，今天先把面板类特效归结一下。

ajaxControlToolkit 提供的面板类类控件有三个， CollapsiblePanel 控件、 DragPanel 控件、 Tabs 控件，这三类控件所实现的效果如果在没有 ajaxControlTookit 以前，只能通过 JS 来实现（个人认为），而且相当麻烦，不过现在只要设置其相应的属性即可以实现超炫的效果。

还是先把三类控件的相关属性列一下，再举一个例子以说明其具体的应用：

A、 CollapsiblePanel 控件

CollapsiblePanel 控件是实现一个 Panel 的显示和隐藏，并能定义该 Panel 的样式。

要实现 Panel 的折叠和伸展有两种方式，按钮方式和图片方式，其实个人认为两种方式没有多大的分别，无非是应用的个别属性不一样，所以只要会理会其相应的属性设置应用起来就会得心应手。以下是 CollapsiblePanel 的相关属性

TargetControlID	要实现折叠的 Panel 的 ID
CollapsedSize	Panel 折叠后的尺寸
ExpandedSize	Panel 伸展后的迟寸
Collapsed	默认加载页面时，此 Panel 是否处于折叠状态
ExpandControlID	激发伸展效果的控件，主要是通过控件的 Click 事件实现伸展效果
CollapseControlID	激发折叠效果的控件，主要是通过控件的 Click 事件实现折叠效果
AutoCollapse	当 Panel 失去焦点时是否自动折叠
AutoExpand	当 Panel 失去焦点时是否自动伸展
ScrollContents	是否在 Panel 内显示滚动条
TextLableID	显示折叠状态的目标控件
CollapsedText	折叠状态时目标控件显示的信息
ExpandedText	伸展状态时目标控件显示的信息
ImageControlID	折叠和伸展方式为图片方式时，显示该图像的控件 ID
ExpandedImage	伸展时使用的图像路径
CollapsedImage	折叠时使用的图像路径
ExpandDirection	Panel 伸展方向，伸展方向有水平和垂直两种

 

B、 DragPanel 控件

DragPanel 控件可以实现 Panel 的自由拖动，有点类似于 WebPart 的功能，其相关属性如下：

TargetControlID	设置被拖拽目标控件的 ID
DragHandleID	设置实现拖拽的控件，即当拖动 DragHandleID 时，实际上移动的是 TargetControlID 。（我都弄得有点晕了，不过还好）

 

C、 Tabs 控件

    本人比较喜欢也用得比较多的一个控件，该控件在一个页面上显示多个选项卡，并且不刷新页面。 Tabs 控件用来制作选项卡界面，它可以控制各个选项卡的显示和隐藏，并提供 HeaderText 和 ContentTemplate 属性实现选项卡内要包装的内容，这两个属性同 GridView 中的相同属性应用方法一样。

OnClientActiveTabChanged	此事件在单击选项卡标题时触发
Height	选项卡的高度
HeaderText	选项卡的标题
ContentTemplate	选项卡内的模板
HeaderTemplate	选项卡的标题模板
ActiveTabIndex	默认显示的选项卡
ScrollBars	是否显示滚动条

 

以前提到正确安装了 ASP.NET AJAX 和 ajaxControlToolkit 之后也随之安装了相应的网站模板，当新建网站项目时 Visual Studio 将会提供已经安装好的 AJAX 网站模板以供用户选择，如图：

实例：

在上图窗体中选择 AJAX ControlToolkit Web Site 网站模板，并取项目名称为 panels ，项目程序加载时会显示一个 readme.txt 文档，文档中并无多少内容，只是说明工具包是否可用、控件的 prefix 、以及要获取更多控件帮助可到 http://ajax.asp.net/ajaxtoolkit/ ，在该网站上可以看到ajaxControlToolkit 工具包的具体应用方法以及应用效果。

Vs 将程序加载完成后重命名 default.aspx 或者新建一个页面并命名为 CollapsiblePanel.aspx ，再加两个页面新项，并分别命名为 DragPanel.aspx 和 Tabs.aspx ，并新建一个文件夹，取名为 Images ，效果如图：

首先，先做 CollapsiblePanel 的实例，打开 CollapsiblePanel.aspx

因为通过 LinkButton 按钮的 Click 事件会造成页面的回发，为了避免引起这种刷新，故在页面中加一个 ScriptManager 和 UpdatePanel ，在 UpdatePanel 中添加一个 CollapsiblePanelExtender 控件，和两 panel ， ID 分别为 Panel1 和 Panel2 ，并拖放一个 LinkButton 到 Panel1 中，在 Panel2 中随意加一些文字或者其它东东， Panel1 和 Panel2 的属性可自行设置，页面效果如下图所示

设置 CollapsibelPanelExtender 的属性如下：

< ajaxToolkit : CollapsiblePanelExtender ID ="CollapsiblePanelExtender1" runat ="server"

                    TargetControlID ="Panel2"

                    CollapsedSize ="0"

                    Collapsed ="false"

                    ExpandControlID ="LinkButton1"

                    CollapseControlID ="LinkButton1"

                    AutoCollapse ="false"

                    AutoExpand ="true"

                    ScrollContents ="false"

                    TextLabelID ="LinkButton1"

                    CollapsedText =" 显示Panel"

                    ExpandedText =" 隐藏Panel"

                    ExpandDirection ="Vertical">

                </ ajaxToolkit : CollapsiblePanelExtender >

 

下载示例