-----------------------------------------------------------
资源
-----------------------------------------------------------
版本:1.0 Beta 2
官方网站:http://ajax.asp.net/default.aspx?tabid=47&subtabid=477
官方下载网站:http://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=AtlasControlToolkit
官方展示网站:http://ajax.asp.net/ajaxtoolkit/
-----------------------------------------------------------
示例代码(以下是根据展示网站整理出来的。持续更新中)
-----------------------------------------------------------
Accordion
类似OutlookBar的折叠显示效果
<ajaxToolkit:Accordion
ID="MyAccordion"
runat="Server"
SelectedIndex="0"
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent"
AutoSize="None">
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40"
<Panes>
<ajaxToolkit:AccordionPane
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent">
<Header> . . . </Header>
<Content> . . . </Content>
</ajaxToolkit:AccordionPane>
.
.
.
</Panes>
<HeaderTemplate>...</HeaderTemplate>
<ContentTemplate>...</ContentTemplate>
</ajaxToolkit:Accordion>
AlwaysVisibleControl
类似浮动层效果
<ajaxToolkit:AlwaysVisibleControlExtender ID="ace" runat="server"
TargetControlID="timer"
VerticalSide="Top"
VerticalOffset="10"
HorizontalSide="Right"
HorizontalOffset="10"
ScrollEffectDuration=".1" />
Animation
为层的展示添加 Move,Resize,Fade,Color等动画变化效果
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="ctrl">
<Animations>
<OnLoad> ... </OnLoad>
<OnClick> ... </OnClick>
<OnMouseOver> ... </OnMouseOver>
<OnMouseOut> ... </OnMouseOut>
<OnHoverOver> ... </OnHoverOver>
<OnHoverOut> ... </OnHoverOut>
</Animations>
</ajaxToolkit:AnimationExtender>
CascadingDropDown
局部刷新的级联菜单
<ajaxToolkit:CascadingDropDown ID="CDD1" runat="server"
TargetControlID="DropDownList2"
Category="Model"
PromptText="Please select a model"
LoadingText="[Loading models...]"
ServicePath="CarsService.asmx"
ServiceMethod="GetDropDownContents"
ParentControlID="DropDownList1"
SelectedValue="SomeValue" />
[WebMethod]
public CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category){...}
CollapsiblePanel
可缩放的Panel
<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..."
OpenedText="Hide Details"
ImageControlID="Image1"
ExpandedImage="~/images/collapse.jpg"
CollapsedImage="~/images/expand.jpg"
ExpandDirection="Height"/>
ConfirmButton
为客户端按钮添加 确认对话框功能
<ajaxToolkit:ConfirmButtonExtender ID="cbe" runat="server"
TargetControlID="LinkButton1"
ConfirmText="Are you sure you want to click this?" />
DragPanel
为层添加可拖动功能
<ajaxToolkit:DragPanelExtender ID="DPE1" runat="server"
TargetControlID="Panel3"
DragHandleID="Panel4" />
DropDown
点击控件后下拉展现指定的层(如菜单)
<ajaxToolkit:DropDownExtender runat="server" ID="DDE"
TargetControlID="TextLabel"
DropDownControlID="DropPanel" />
DropShadow
为层添加阴影和圆角效果
<ajaxToolkit:DropShadowExtender ID="dse" runat="server"
TargetControlID="Panel1"
Opacity=".8"
Rounded="true"
TrackPosition="true" />
DynamicPopulate
由 web service 或 page method 返回的html字符串替换
<ajaxToolkit:DynamicPopulateExtender ID="dp" runat="server"
TargetControlID="Panel1"
ClearContentsDuringUpdate="true"
PopulateTriggerControlID="Label1"
ServiceMethod="GetHtml"
UpdatingCssClass="dynamicPopulate_Updating" />
FilteredTextBox
过滤字符的文本框
<ajaxToolkit:FilteredTextBoxExtender ID="ftbe" runat="server"
TargetControlID="TextBox3"
FilterType="Custom, Numbers"
ValidChars="+-=/*()." />
HoverMenu
随光标移动的菜单
<ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server"
TargetControlID="Panel9"
HoverCssClass="popupHover"
PopupControlID="PopupMenu"
PopupPosition="Left"
OffsetX="0"
OffsetY="0"
PopDelay="50" />
<asp:Panel CssClass="popupMenu" ID="PopupMenu"
runat="server">
<asp:LinkButton ID="LinkButton1" runat="server"
CommandName="Edit" Text="Edit" />
<br />
<asp:LinkButton ID="LinkButton2" runat="server"
CommandName="Delete" Text="Delete" />
</asp:Panel>
ModalPopup
灯箱效果(弹出模态对话框,背景变灰且不可操作。类似windows关机)
<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="OkButton"
OnOkScript="onOk()"
CancelControlID="CancelButton" />
MutuallyExclusiveCheckbox
可互斥的Checkbox
<ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server"
ID="MustHaveGuestBedroomCheckBoxEx"
TargetControlID="MustHaveGuestBedroomCheckBox"
Key="GuestBedroomCheckBoxes" />
NoBot
anti-bot技术。用以限制不安全的请求。如:
InvalidBadResponse : 不符合流程的响应
InvalidResponseTooSoon : 表单填写的时间过快
InvalidAddressTooActive : 提交者的IP出现过于频繁
InvalidBadSession : 无效的Session客户
InvalidUnknown : 其它不安全的请求
<ajaxToolkit:NoBot
ID="NoBot2"
runat="server"
OnGenerateChallengeAndResponse="CustomChallengeResponse"
ResponseMinimumDelaySeconds="2"
CutoffWindowSeconds="60"
CutoffMaximumInstances="5" />
NumericUpDown
就是Windows控件里面的SpinButton
<ajaxToolkit:NumericUpDownExtender ID="NUD1" runat="server"
TargetControlID="TextBox1"
Width="100"
RefValues="January;February;March;April"
TargetButtonDownID="Button1"
TargetButtonUpID="Button2"
ServiceDownPath="WebService1.asmx"
ServiceDownMethod="PrevValue"
ServiceUpPath="WebService1.asmx"
ServiceUpMethod="NextValue"
Tag="1" />
PagingBulletedList
按关键字分组的控件(类似字典)
<ajaxToolkit:PagingBulletedListExtender ID="PBLE1" runat="server"
TargetControlID="BulletedList1"
ClientSort="true"
IndexSize="1"
MaxItemPerPage="20"
Separator=" - "
SelectIndexCssClass="selectIndex"
UnselectIndexCssClass="unSelectIndex" />
PasswordStrength
展示输入密码强弱能力的控件
<ajaxToolkit:PasswordStrength ID="PS" runat="server"
TargetControlID="TextBox1"
DisplayPosition="RightSide"
StrengthIndicatorType="Text"
PreferredPasswordLength="10"
PrefixText="Strength:"
TextCssClass="TextIndicator_TextBox1"
MinimumNumericCharacters="0"
MinimumSymbolCharacters="0"
RequiresUpperAndLowerCaseCharacters="false"
TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent"
CalculationWeightings="50;15;15;20" />
PopupControl
点击控件弹出附加窗口。如弹出式日期控件
<ajaxToolkit:PopupControlExtender ID="PopEx" runat="server"
TargetControlID="DateTextBox"
PopupControlID="Panel1"
Position="Bottom" />
Rating
排名控件。用户用鼠标选择星星的个数来代表投票
<ajaxToolkit:Rating ID="ThaiRating" runat="server"
CurrentRating="2"
MaxRating="5"
StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar"
FilledStarCssClass="filledRatingStar"
EmptyStarCssClass="emptyRatingStar"
OnChanged="ThaiRating_Changed" />
ReorderList
可客户端排序的列表
<ajaxToolkit:ReorderList ID="ReorderList1" runat="server"
DataSourceID="ObjectDataSource1"
DragHandleAlignment="Left"
ItemInsertLocation="Beginning"
DataKeyField="ItemID"
SortOrderField="Priority"
AllowReorder="true">
<ItemTemplate>...</ItemTemplate>
<ReorderTemplate>...</ReorderTemplate>
<DragHandleTemplate>...</DragHandleTemplate>
<InsertItemTemplate>...</InsertItemTemplate>
</ajaxToolkit:ReorderList>
ResizableControl
可在客户端用鼠标控制控件大小
<ajaxToolkit:ResizableControlExtender ID="RCE" runat="server"
TargetControlID="PanelImage"
HandleCssClass="handleImage"
ResizableCssClass="resizingImage"
MinimumWidth="50"
MinimumHeight="20"
MaximumWidth="260"
MaximumHeight="130"
OnClientResize="OnClientResizeImage"
HandleOffsetX="3"
HandleOffsetY="3" />
RoundedCorners
让Panel展现圆角
<ajaxToolkit:RoundedCornersExtender ID="rce" runat="server"
TargetControlID="Panel1"
Radius="6" />
Slider
就是Windows里面的SliderBar,有水平和垂直两种样式
<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server"
TargetControlID="Slider1"
Minimum="-100"
Maximum="100"
BoundControlID="Slider1_BoundControl"
Steps="5" />
<ajaxToolkit:SliderExtender ID="SliderExtender2" runat="server"
TargetControlID="Slider2"
BoundControlID="Slider2_BoundControl"
Orientation="Vertical"
EnableHandleAnimation="true" />
TextBoxWatermark
输入框水印效果:为输入框提供默认文字和背景,在用户鼠标点击或者悬停后,清空背景及文字
<ajaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server"
TargetControlID="TextBox1"
WatermarkText="Type First Name Here"
WatermarkCssClass="watermarked"
HasInitialFocus="false" />
ToggleButton
将CheckBox用图像替代
<ajaxToolkit:ToggleButtonExtender ID="ToggleEx" runat="server"
TargetControlID="CheckBox1"
ImageWidth="19"
ImageHeight="19"
CheckedImageAlternateText="Check"
UncheckedImageAlternateText="UnCheck"
UncheckedImageUrl="ToggleButton_Unchecked.gif"
CheckedImageUrl="ToggleButton_Checked.gif"
DisabledUncheckedImageUrl="ToggleButton_DisabledUnchecked.gif"
DisabledCheckedImageUrl="ToggleButton_DisabledChecked.gif" />
UpdatePanelAnimation
为Panel添加提交时的动画效果。如fade, collapse, Colorlize
<ajaxToolkit:UpdatePanelAnimationExtender ID="ae" runat="server" TargetControlID="up">
<Animations>
<OnUpdating> ... </OnUpdating>
<OnUpdated> ... </OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
ValidatorCallout
美化版的客户端数据验证
<ajaxToolkit:ValidatorCalloutExtender
runat="Server"
ID="PNReqE"
TargetControlID="PNReq"
Width="350px"
HighlightCssClass="highlight"
WarningIconImageUrl="warning.gif"
CloseImageUrl="close.gif" />