Ajax Control Toolkit 34个服务器端控件第1/2页

1. Accordion
【功能概述】
Accordion可以让你设计多个panel 并且一次只显示一个Panel .在页面上的显示效果就像是使用了多个CollapsiblePanels只不过每一次只展开其中一个CollapsiblePanel.Accordion控件内部包含了若干个AccordionPane，每一个AccordionPane的template里包括了对其Header和Content的定义。我们可以在后台代码中通过SelectedIndex属性取得当前展开的哪一个Panel，还可以控制哪一个Panel展开。
经常可以见到类似的效果，比如QQ、Msn好友分类的折叠效果。
【细节】
(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(“_AccordionExtender”);
【代码示意】

ContentCssClass=”accordionContent” FadeTransitions=”false” FramesPerSecond=”40″
TransitionDuration=”250″ AutoSize=”None”>

1. Accordion

2. AlwaysVisibleControl
【功能概述】
AlwaysVisibleControl 是一个简单的扩展控件可以让一部分内容浮动在页面上，当滚动页面或者改变浏览器大小时总是可见的。它可以扩展任意一个Asp.net 控件，并可按照要求设置水平 竖直方向上的相对距离.
最多的应用是在线阅读的目录和不胜其烦的浮动小广告。
【细节】
(1) 避免控件闪烁，要扩展的控件要使用absolutely position
(2) HorizontalSide=”Center” VerticalSide=”Top” 使用这个方式控制浮动的位置
(3) Var label = ocument.getElementById(‘ctl00_SampleContent_currentTime’);这行代码我们可以使用更简单的方法：
var label = $get(‘ctl00_SampleContent_currentTime’);
【代码示意】
代码示意：

3. Animation
【功能概述】
28个控件种效果最酷的！顾名思义实现动画效果。它是一个插入式，可扩展的框架可以方便的为你的页面添加动画效果。
【细节】
请参考页面代码阅读下面的细节内容:
(1)Sys.UI.DomElement.getLocation(b) 取得控件位置的函数，常用！！！
(2)动画分为两种：Animation Action 后者的强大让我很兴奋
(3) 顺序执行的动画脚本
(4) 并发执行的动画脚本
(5)【Action】 控制目标元素外观样式，属性–值的格式修改，一个元素可以应用多个StyleAction
(6)【Action】 控件是否可用使用的方式跟上面是一样的，当前控件可省略AnimationTarget
(7)【Action】
【示意代码】
代码示意
TargetControlID=”Panel3″
DragHandleID=”Panel4″ />
10. DropDown
【功能概述】
DropDown 同样是一个 ASP.NET Ajax extender 可以对任何 ASP.NET control 进行扩展实现 SharePoint-style drop-down menu效果。弹出的只不过是其它的panel或者控件而已。 在IE浏览器中下拉列表总是在最前面的，的确是影响页面效果，这个控件的出现可以解决这一问题.这随时随地的弹出窗口成为WEB 2.0网站的标志性建筑，弹出的东西也越来越丰富。
【细节】
(1)TargetControlID要在什么控件上实现扩展
(2)DropDownControlID弹出来什么
(3) 示例中是对一个Label进行的扩展，我试着扩展TextBox效果更好！
【示意代码】
代码示意：
visibility: hidden;”>
OnClick=”OnSelect” />
OnClick=”OnSelect” />
OnClick=”OnSelect” />

<cc1:dropdownextender runat="server" id="DDE" targetcontrolid="TextLabel"
DropDownControlID=”DropPanel” />
还有一段代码有很多可以学习的地方：
代码示意：

13. FilteredTextBox
【功能概述】
FilteredTextBox扩展控件用来阻止用户在文本框输入无效字符 。由于这种效果的实现是依赖于deactivating JavaScript（怎么翻译呢？）,所以不要期望数据会发送到服务器端进行校验。
【细节】
(1)过滤条件Numbers LowercaseLetters UppercaseLetters Custom
(2)过滤条件也可以是Custom的组合 FilterType=”Custom, Numbers”
(3)ValidChars=”+-=/*().” Custom要定义这样的有效字符串
(4)这个控件我认为是聊胜于无，我们要把允许输入的数据进行枚举，太难了。事实上，这个控件在任何状态下都是接受中文的。如果使用正则表达式情形或许好些。看它的实现代码还有进一步改进的可能，学习研究中……
【示意代码】
示意代码：
TargetControlID=”TextBox3″
FilterType=”Custom, Numbers”
ValidChars=”+-=/*().” />
在该控件的实现代码中我发现了这样一段,这可能是一个突破口：
特殊键排除代码：
<var scancode;
if (evt.rawEvent.keyIdentifier) {
// Safari
// Note (Garbin): used the underlying rawEvent insted of the DomEvent instance.
if (evt.rawEvent.ctrlKey || evt.rawEvent.altKey || evt.rawEvent.metaKey) {
return;
}
if (evt.rawEvent.keyIdentifier.substring(0,2) != “U+”) {
return;
}
scanCode = evt.rawEvent.charCode;
if (scanCode == 63272 /* Delete */) {
return;
}
}
else {
scanCode = evt.charCode;
}
if (scanCode && scanCode >= 0x20 /* space */) {
var c = String.fromCharCode(scanCode);
if(!this._processKey(c)) {
evt.preventDefault();
}
}
}

14. HoverMenu
【功能概述】
HoverMenu控件可以扩展任何 ASP.NET WebControl, 同时将把附加的显示内容关联到该控件上，当用户移动鼠标到该控件的时候附加的内容将显示出来。
【细节】
(1) PopupControlID要弹出来什么
(2)PopupPostion 在哪里弹出来Left (Default), Right, Top, Bottom, Center.
(3)OffsetX/OffsetY 弹出项与源控件的距离
(4) PopDelay 弹出延时显示 单位milliseconds. Default is 100.
【代码示意】
代码示意：
TargetControlID=”Panel9″
HoverCssClass=”popu

pHover”
PopupControlID=”PopupMenu”
PopupPosition=”Left”
OffsetX=”0″
OffsetY=”0″
PopDelay=”50″ />
示例页面上还有一个小细节：
HttpUtility.HtmlEncode()使用 HttpUtility.HtmlEncode 将危险的符号转换为它们的 HTML 表示形式。
代码示意：
‘>

‘>

‘>
15. MaskedEdit NEW！！！
【功能概述】
MaskedEdit 控件是对TextBox control的扩展.用户输入会在客户端进行验证。在示例页面中，我感觉实际效果并不是太好所以没有深入学习，不多说了。
16. ModalPopup
【功能概述】
ModalPopup 扩展控件允许在页面上模式弹出内容并阻止用户和页面上其他区域的交互。模式弹出区域的样式都是可以自定义的。 用户可以在模式弹出框选择OK/Cancel，对用户选择的处理方式有两种：使用客户端脚本或者PostBack到服务器端。这样我们就得到了用户的选择结果！
【细节】
(1) 看下面的代码可以看到执行客户端脚本的方法。
(2) 应该说这个控件是提供了一个模式弹出对话框的模板
(3) 在正式版以前的所有版本，这个控件在Opear浏览器中都是不正常的。正式版已经修正这个BUG，现在正在比较学习两个版本的源代码，看看问题的原因和解决方法是什么。
【示意代码】
代码示意：

Text=”信息提示”> 

确定要删除当前下载的任务么？

PopupControlID=”Panel2″ BackgroundCssClass=”modalBackground” DropShadow=”true”
OkControlID=”Button1″ OnOkScript=”onOk()” CancelControlID=”CancelButton” />
17. MutuallyExclusiveCheckBox
【功能概述】
互斥复选框就像RadioButton一样，应用的场景是：“a number of choices are available but only one can be chosen”
【细节】
(1)Key属性用来分组就像RdiolistGroup一样
(2)argetControlID用来绑定已有的CheckBox
【代码示意】
ID=”MustHaveGuestBedroomCheckBoxEx”
TargetControlID=”MustHaveGuestBedroomCheckBox”
Key=”GuestBedroomCheckBoxes” />