Ajax Control Toolkit 34个服务器端控件

Ajax Control Toolkit 34 个服务器端控件

07-12-20 00:00:00　不详　

核心提示： 1. Accordion 【功能概述】 Accordion 可以让你设计多个 panel 并且一次只显示

一个 Panel .在页面上的显示效果就像是使用了多个 Collapsi

1. Accordion

【功能概述】

Accordion 可以让你设计多个 panel 并且一次只显示一个 Panel .在页面上的显示效果就像是

(1) 不要把 Accordion 放在 Table 中而又把 FadeTransitions 设置为 True，这将引起布局混乱

(2) 在 AccordionPane 模板中的 Content 中可以定义任何 Web 元素，表现的就像一个容器

(3) AccordionPane 内容模板自动改变大小有三种 AutoSize modes ：None(推荐) Limit Fill

(4) $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender') 这 里 找 到 的 是

Behavior. 什 么 是 Behavior 呢 ？ 在 Asp.net Ajax 框 架 中 包 含 一 组 动 作 并 完 成 一 个 功 能 .

Accordion 的一个 Behavior 就是淡入淡出.

找到 Behavior 的引用，behavior.set_FadeTransitions() behavior.get_FadeTransitions()的方式来

实现具体某一个 Behavior 的访问和修改.

var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender'); 这种写法是不

好 的 ， 我 们 在 自 动 测 试 的 页 面 中 发 现 了 更 好 的 写 法 ： var behavior=$find("<%=

behavior.set_FadeTransitions(!behavior.get_FadeTransitions());

}

}

function changeAutoSize() {

var behavior = $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');

var ctrl = $get('autosize'); // 这里找的是下拉列表控件,不是 Behavior

if (behavior) {

var size = 'None'; // 这里顺便看看怎么使用 Select

switch (ctrl.selectedIndex) {

case 0 :

behavior.get_element().style.height = 'auto';

size = AjaxControlToolkit.AutoSize.None;

break;

size = AjaxControlToolkit.AutoSize.Limit;

break;

}

behavior.set_AutoSize(size);

}

if (document.focus) {

document.focus();

}

}

</script>

<a href="" onclick="return false;" class="accordionLink">1.

Accordion</a></Header>

</ajaxToolkit:Accordion>

2. AlwaysVisibleControl

【功能概述】

AlwaysVisibleControl 是一个简单的扩展控件可以让一部分内容浮动在页面上，当滚动页面

或者改变浏览器大小时总是可见的。它可以扩展任意一个 Asp.net 控件，并可按照要求设置

水平 竖直方向上的相对距离.

最多的应用是在线阅读的目录和不胜其烦的浮动小广告。

【细节】

(3) Var label = ocument.getElementById('ctl00_SampleContent_currentTime'); 这行代码我们可

【代码示意】

代码示意：

<cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1"

HorizontalSide="Center" VerticalSide="Top" TargetControlID="Panel1" runat="server">

3. Animation

【功能概述】

28 个控件种效果最酷的！顾名思义实现动画效果。它是一个插入式，可扩展的框架可以方

便的为你的页面添加动画效果。

【细节】

请参考页面代码阅读下面的细节内容:

(1)Sys.UI.DomElement.getLocation(b) 取得控件位置的函数，常用！！！

(3)<Sequence> </Sequence> 顺序执行的动画脚本

AnimationTarget

$get('flyout'));" />执行一段脚本的 Action

(8) 【Action】 <HideAction />隐藏目标的控件

(9) 【Action】<OpacityAction AnimationTarget="info" Opacity="0" /> 设置透明度的 Action

(10)【Animation】 <FadeIn AnimationTarget="info" Duration=".2"/> <FadeOut /> 淡入淡

出

(11) 【 Animation 】 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true"

FontUnit="px" /> 控制目标元素的大小但是注意：If scaleFont is true, the size of the font will

also scale with the element. If center is true, then the element's center will not move as it is

scaled. It is important to note that the target must be positioned (i.e. absolutely) so that settings its

top/left properties will change its location in order for center to have an effect.

(14) 【Animation】 <Resize Width="260" Height="280" />改变元素的大小 Action

(15) 动画效果是在用户某一个动作发生的时候触发，触发的时机包括：OnLoad OnClick

OnMouseOver OnMouseOut OnHoverOver OnHoverOut

正式版的页面文件为动画脚本添加了注释更加清晰易懂.上面列出的是常用的一些动画效果，

全部资料参见 Anmation Reference。

仔细阅读 Animation 的页面代码，其实我们已经提前触摸到了 Xaml 的编程风格。Asp.net

Ajax 之后的下一代 WEB 界面是 WPF/E,WPF/E 现在支持的是”javascript+Xaml” 还不支

持”C# + Xaml”。

下一代的 WEB UI 会是怎样的？下一个版本的 Asp.net 会怎样安排 Ajax 的位置？WPF/E 会

不会被整合在新版本的 Asp.net 中呢？期待中……

【示意代码】

代码示意：

<OnLoad> </OnLoad>

<OnClick> </OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

4. AutoComplete NEW!!!

【功能概述】

AutoComplete 控件是对 Asp.net 文本框控件的扩展，当用户词汇前面的字母时以弹出区域

的形式给出备选词。这个功能的完成依赖于特定的 Web Service。

在正式版的 Ajax Control Toolkit 中看到自动完成扩展控件有一种感觉：它终于出现在了它

Google 的自动完成功能，新浪网易等信箱的收件人自动完成功能是这个功能的成功应用。

【细节】

(1) 调用的 Web Service 方法签名有要求：

[WebMethod]

public string[] GetCompletionList(string prefixText, int count) { ... }

(2)MinimumPrefixLength 最短前缀字符数，就是说你至少要键入几个字符才会出现提示

5. Calendar NEW!!!

【功能概述】

Calendar 同样是对文本框的扩展，当点击文本框的时候弹出日期选择选项。现在的版本提

供的功能已经和 WinForm 中的日期控件一样，可以通过点击日期选择，点击箭头在年月之

间切换。

【细节】

(1)同样是对文本框的扩展，文本框获得焦点就会出现日期选择，样式是可以自定义的

(2)虽然一定是对文本框的扩展但是我们还是可以指定弹出按钮 PopupButtonID，一旦

(3)不需要把它放在 UpdatePanel 中

【功能概述】