Ajax Control Toolkit 34个服务器端控件.docx
- 文档编号:5616083
- 上传时间:2022-12-29
- 格式:DOCX
- 页数:27
- 大小:31.14KB
Ajax Control Toolkit 34个服务器端控件.docx
《Ajax Control Toolkit 34个服务器端控件.docx》由会员分享,可在线阅读,更多相关《Ajax Control Toolkit 34个服务器端控件.docx(27页珍藏版)》请在冰豆网上搜索。
AjaxControlToolkit34个服务器端控件
AjaxControlToolkit34个服务器端控件
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内容模板自动改变大小有三种AutoSizemodes:
None(推荐)LimitFill
(4)$find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender')这里找到的是Behavior.什么是Behavior呢?
在AAjax框架中包含一组动作并完成一个功能.Accordion的一个Behavior就是淡入淡出.
找到Behavior的引用,behavior.set_FadeTransitions()behavior.get_FadeTransitions()的方式来实现具体某一个Behavior的访问和修改.
varbehavior=$find('ctl00_SampleContent_MyAccordion_AccordionExtender');这种写法是不好的,我们在自动测试的页面中发现了更好的写法:
varbehavior=$find("<%=MyAccordion.ClientID%>_AccordionExtender");
【代码示意】
functiontoggleFade(){
varbehavior=$find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');
if(behavior){
behavior.set_FadeTransitions(!
behavior.get_FadeTransitions());
}
}
functionchangeAutoSize(){
varbehavior=$find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');
varctrl=$get('autosize'); //这里找的是下拉列表控件,不是Behavior
if(behavior){
varsize='None'; //这里顺便看看怎么使用Select
switch(ctrl.selectedIndex){
case0:
behavior.get_element().style.height='auto';
size=AjaxControlToolkit.AutoSize.None;
break;
case1:
behavior.get_element().style.height='400px';
size=AjaxControlToolkit.AutoSize.Fill;
break;
case2:
behavior.get_element().style.height='400px';
size=AjaxControlToolkit.AutoSize.Limit;
break;
}
behavior.set_AutoSize(size);
}
if(document.focus){
document.focus();
}
}
AccordionID="MyAccordion"runat="server"SelectedIndex="0"HeaderCssClass="accordionHeader" ContentCssClass="accordionContent"FadeTransitions="false"FramesPerSecond="40" TransitionDuration="250"AutoSize="None"> AccordionPaneID="AccordionPane1"runat="server"> AccordionPane>
Accordion>
2.AlwaysVisibleControl
【功能概述】
AlwaysVisibleControl是一个简单的扩展控件可以让一部分内容浮动在页面上,当滚动页面或者改变浏览器大小时总是可见的。
它可以扩展任意一个A控件,并可按照要求设置水平竖直方向上的相对距离.
最多的应用是在线阅读的目录和不胜其烦的浮动小广告。
【细节】
(1) 避免控件闪烁,要扩展的控件要使用absolutelyposition
(2) HorizontalSide="Center"VerticalSide="Top"使用这个方式控制浮动的位置
(3) Varlabel=ocument.getElementById('ctl00_SampleContent_currentTime');这行代码我们可以使用更简单的方法:
varlabel=$get('ctl00_SampleContent_currentTime');
【代码示意】
代码示意:
AlwaysVisibleControlExtenderID="AlwaysVisibleControlExtender1"HorizontalSide="Center"VerticalSide="Top"TargetControlID="Panel1"runat="server"> 3.Animation 【功能概述】 28个控件种效果最酷的! 顾名思义实现动画效果。 它是一个插入式,可扩展的框架可以方便的为你的页面添加动画效果。 【细节】 请参考页面代码阅读下面的细节内容: (1)Sys.UI.DomElement.getLocation(b)取得控件位置的函数,常用! ! ! (2)动画分为两种: AnimationAction后者的强大让我很兴奋 (3) (4) (5)【Action】 (6)【Action】 (7)【Action】 (8)【Action】 (9)【Action】 (10)【Animation】 (11)【Animation】 IfscaleFontistrue,thesizeofthefontwillalsoscalewiththeelement.Ifcenteristrue,thentheelement'scenterwillnotmoveasitisscaled.Itisimportanttonotethatthetargetmustbepositioned(i.e.absolutely)sothatsettingsitstop/leftpropertieswillchangeitslocationinorderforcentertohaveaneffect. (12)【Animation】 (13)【Animation】 (14)【Animation】 (15)动画效果是在用户某一个动作发生的时候触发,触发的时机包括: OnLoadOnClickOnMouseOverOnMouseOutOnHoverOverOnHoverOut 正式版的页面文件为动画脚本添加了注释更加清晰易懂.上面列出的是常用的一些动画效果,全部资料参见AnmationReference。 仔细阅读Animation的页面代码,其实我们已经提前触摸到了Xaml的编程风格。 AAjax之后的下一代WEB界面是WPF/E,WPF/E现在支持的是”javascript+Xaml”还不支持”C#+Xaml”。 下一代的WEBUI会是怎样的? 下一个版本的A会怎样安排Ajax的位置? WPF/E会不会被整合在新版本的A中呢? 期待中…… 【示意代码】 代码示意: AnimationExtenderID="ae"runat="server"TargetControlID="ctrl"> AnimationExtender> 4.AutoComplete 【功能概述】 AutoComplete控件是对A文本框控件的扩展,当用户词汇前面的字母时以弹出区域的形式给出备选词。 这个功能的完成依赖于特定的WebService。 在正式版的AjaxControlToolkit中看到自动完成扩展控件有一种感觉: 它终于出现在了它应该出现的地方。 之前AutoComplete控件是在CTP版本中以核心组件的形式出现的,这个功能极为明确的控件被归类到核心组件,我还是比较迷惑。 正式版中它终于成为了一个扩展控件。 Google的自动完成功能,新浪网易等信箱的收件人自动完成功能是这个功能的成功应用。 【细节】 从Atlas的版本开始,AutoComplete的使用方法就没有太大的改变,只要注意: (1)调用的WebService方法签名有要求: [WebMethod] publicstring[]GetCompletionList(stringprefixText,intcount){...} (2)MinimumPrefixLength最短前缀字符数,就是说你至少要键入几个字符才会出现提示 5.Calendar 【功能概述】 Calendar同样是对文本框的扩展,当点击文本框的时候弹出日期选择选项。 现在的版本提供的功能已经和WinForm中的日期控件一样,可以通过点击日期选择,点击箭头在年月之间切换。 【细节】 (1)同样是对文本框的扩展,文本框获得焦点就会出现日期选择,样式是可以自定义的 (2)虽然一定是对文本框的扩展但是我们还是可以指定弹出按钮PopupButtonID,一旦这个值设定了,文本框获得焦点也不会弹出日期选择 (3)不需要把它放在UpdatePanel中 6.CascadingDropDown 【功能概述】 CascadingDropDown控件是对ASP.NETDropDownListcontrol的扩展,实现对一个DropDownList操作时其它DropDownList发生相应的变化。 这个功能的实现依赖于WebService。 【细节】 (1)如果使用Webservice方法签名必须符合下面的形式: [WebMethod] publicCascadingDropDownNameValue[]GetDropDownContents( stringknownCategoryValues,stringcategory){...} (2)在阅读代码的时候请关注: Category属性。 官方说法ThenameofthecategorythisDropDownListrepresents实打开~/App_Data/CarsService.xml你就发现这是Xml的元素标签。 从这个角度我们就解决了为什么联动,即联动的本质;同时也明白了调用Service的参数约定。 【示意代码】 CascadingDropDownID="CascadingDropDown1"runat="server"TargetControlID="DropDownList1"Category="Make"PromptText="Pleaseselectamake"LoadingText="[Loadingmakes]"ServicePath="CarsService.asmx"ServiceMethod="GetDropDownContents"/> CascadingDropDownID="CascadingDropDown2"runat="server"TargetControlID="DropDownList2"Category="Model"PromptText="Pleaseselectamodel"LoadingText="[Loadingmodels]"ServiceMethod="GetDropDownContentsPageMethod"ParentControlID="DropDownList1"/> CascadingDropDownID="CascadingDropDown3"runat="server"TargetControlID="DropDownList3"Category="Color"PromptText="Pleaseselectacolor"LoadingText="[Loadingcolors]"ServicePath="~/CascadingDropDown/CarsService.asmx"ServiceMethod="GetDropDownContents"ParentControlID="DropDownList2"/> 另外页面上还有一段定义UpdatePanel的代码很典型,可以作为参考: UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional"RenderMode="inline"> LabelID="Label1"runat="server"Text="[Noresponseprovidedyet]"/> AsyncPostBackTriggerControlID="DropDownList3"EventName="SelectedIndexChanged"/> UpdatePanel> 7.CollapsiblePanel 【功能概述】 这个控件几乎在每一个页面上都出现了。 它是非常灵活的一个控件,可以扩展任何ASP.NETPanelcontrol。 在页面上轻松实现展开收缩效果。 这种效果我们最熟悉的恐怕就是XP的文件任务栏了。 【细节】 (1)CollapsiblePanel默认认为使用了标准CSSboxmodel早期的浏览器要! DOCTYPE中设置页面为自适应方式提交数据renderedinIE'sstandards-compliantmode. (2)可以自动展开自动收缩Autoexpand="true"AutoCollapse="true"但是这两个本身是互斥的不能同时为True;如果设置了这两个属性其中一个为True就不要在设置Collapsed="True",这样就没有意义了。 (3)TextLabelID="Label1"这个属性有什么深意\高级的操作么? 我还在研究。 。 。 代码示意: CollapsiblePanelExtenderID="cpe"runat="Server" TargetControlID="Panel1" CollapsedSize="0" ExpandedSize="300" Collapsed="True" ExpandControlID="LinkButton1" CollapseControlID="LinkButton1" AutoCollapse="False" AutoExpand="False" ScrollContents="True" TextLabelID="Label1" CollapsedText="ShowDetails" OpenedText="HideDetails" ImageControlID="Image1" ExpandedImage="~/images/collapse.jpg" CollapsedImage="~/images/expand.jpg" ExpandDirection="Height"/> 8.ConfirmButton 【功能概述】 这个控件是对Button和继承了Button的控件的扩展,它可以捕捉到用户点击了对话框中的“是”“否”;如果是“是”就继续执行后面的代码,反之就停止执行它默认的提交行为。 【细节】 (1)要扩展的LinkButtonButton以及ConfirmButtonExtender都要放在updatepanel里面 如果是放在外面,点击“确定”或者“取消”之
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Ajax Control Toolkit 34个服务器端控件 34 服务器端 控件