Ajax Control Toolkit 34个服务器端控件Word格式文档下载.docx
《Ajax Control Toolkit 34个服务器端控件Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《Ajax Control Toolkit 34个服务器端控件Word格式文档下载.docx(27页珍藏版)》请在冰豆网上搜索。
![Ajax Control Toolkit 34个服务器端控件Word格式文档下载.docx](https://file1.bdocx.com/fileroot1/2022-12/29/dc8f00e2-7b3d-4431-83e7-a28f98aa788b/dc8f00e2-7b3d-4431-83e7-a28f98aa788b1.gif)
behavior.get_FadeTransitions());
}
functionchangeAutoSize(){
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:
400px'
size=AjaxControlToolkit.AutoSize.Fill;
case2:
size=AjaxControlToolkit.AutoSize.Limit;
behavior.set_AutoSize(size);
if(document.focus){
document.focus();
/script>
ajaxToolkit:
AccordionID="
MyAccordion"
runat="
server"
SelectedIndex="
0"
HeaderCssClass="
accordionHeader"
ContentCssClass="
accordionContent"
FadeTransitions="
false"
FramesPerSecond="
40"
TransitionDuration="
250"
AutoSize="
None"
<
Panes>
AccordionPaneID="
AccordionPane1"
Header>
ahref="
"
onclick="
returnfalse;
class="
accordionLink"
1.Accordion<
/a>
/Header>
Content>
/Content>
/ajaxToolkit:
AccordionPane>
/Panes>
Accordion>
2.AlwaysVisibleControl
【功能概述】
AlwaysVisibleControl是一个简单的扩展控件可以让一部分内容浮动在页面上,当滚动页面或者改变浏览器大小时总是可见的。
它可以扩展任意一个A控件,并可按照要求设置水平竖直方向上的相对距离.
最多的应用是在线阅读的目录和不胜其烦的浮动小广告。
(1)
避免控件闪烁,要扩展的控件要使用absolutelyposition
(2)
HorizontalSide="
Center"
VerticalSide="
Top"
使用这个方式控制浮动的位置
(3)
Varlabel=ocument.getElementById('
ctl00_SampleContent_currentTime'
这行代码我们可以使用更简单的方法:
varlabel=$get('
代码示意:
cc1:
AlwaysVisibleControlExtenderID="
AlwaysVisibleControlExtender1"
TargetControlID="
Panel1"
3.Animation
28个控件种效果最酷的!
顾名思义实现动画效果。
它是一个插入式,可扩展的框架可以方便的为你的页面添加动画效果。
请参考页面代码阅读下面的细节内容:
(1)Sys.UI.DomElement.getLocation(b)取得控件位置的函数,常用!
!
(2)动画分为两种:
AnimationAction后者的强大让我很兴奋
(3)<
Sequence>
/Sequence>
顺序执行的动画脚本
(4)<
Parallel>
Parallel>
并发执行的动画脚本
(5)
【Action】<
StyleActionAnimationTarget="
btnCloseParent"
Attribute="
opacity"
value="
/>
控制目标元素外观样式,属性--值的格式修改,一个元素可以应用多个StyleAction
(6)
【Action】<
EnableActionAnimationTarget="
ctl00_ContentPlaceHolder1_btnInfo"
Enabled="
true"
控件是否可用使用的方式跟上面是一样的,当前控件可省略AnimationTarget
(7)
ScriptActionScript="
Cover($get('
ctl00_ContentPlaceHolder1_btnInfo'
),$get('
flyout'
));
执行一段脚本的Action
(8)【Action】<
HideAction/>
隐藏目标的控件
(9)【Action】<
OpacityActionAnimationTarget="
info"
Opacity="
设置透明度的Action
(10)
【Animation】<
FadeInAnimationTarget="
Duration="
.2"
/>
FadeOut/>
淡入淡出
(11)
【Animation】<
ScaleScaleFactor="
0.05"
Center="
ScaleFont="
FontUnit="
px"
控制目标元素的大小但是注意:
IfscaleFontistrue,thesizeofthefontwillalsoscalewiththeelement.Ifcenteristrue,thentheelement'
scenterwillnotmoveasitisscaled.Itisimportanttonotethatthetargetmustbepositioned(i.e.absolutely)sothatsettingsitstop/leftpropertieswillchangeitslocationinorderforcentertohaveaneffect.
(12)【Animation】
PulseDuration="
.1"
脉搏跳动效果
(13)
ColorDuration="
StartValue="
#FFFFFF"
EndValue="
#FF0000"
Property="
style"
PropertyKey="
color"
颜色渐变效果,设置起始结束颜色就可以
(14)【Animation】<
ResizeWidth="
260"
Height="
280"
改变元素的大小Action
(15)动画效果是在用户某一个动作发生的时候触发,触发的时机包括:
OnLoadOnClickOnMouseOverOnMouseOutOnHoverOverOnHoverOut
正式版的页面文件为动画脚本添加了注释更加清晰易懂.上面列出的是常用的一些动画效果,全部资料参见AnmationReference。
仔细阅读Animation的页面代码,其实我们已经提前触摸到了Xaml的编程风格。
AAjax之后的下一代WEB界面是WPF/E,WPF/E现在支持的是”javascript+Xaml”还不支持”C#+Xaml”。
下一代的WEBUI会是怎样的?
下一个版本的A会怎样安排Ajax的位置?
WPF/E会不会被整合在新版本的A中呢?
期待中……
【示意代码】
AnimationExtenderID="
ae"
ctrl"
Animations>
OnLoad>
/OnLoad>
OnClick>
/OnClick>
OnMouseOver>
/OnMouseOver>
OnMouseOut>
/OnMouseOut>
OnHoverOver>
/OnHoverOver>
OnHoverOut>
/OnHoverOut>
/Animations>
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方法签名必须符合下面的形式:
publicCascadingDropDownNameValue[]GetDropDownContents(
stringknownCategoryValues,stringcategory){...}
(2)在阅读代码的时候请关注:
Category属性。
官方说法ThenameofthecategorythisDropDownListrepresents实打开~/App_Data/CarsService.xml你就发现这是Xml的元素标签。
从这个角度我们就解决了为什么联动,即联动的本质;
同时也明白了调用Service的参数约定。
CascadingDropDownID="
CascadingDropDown1"
DropDownList1"
Category="
Make"
PromptText="
Pleaseselectamake"
LoadingText="
[Loadingmakes]"
ServicePath="
CarsService.asmx"
ServiceMethod="
GetDropDownContents"
CascadingDropDown2"
DropDownList2"
Model"
Pleaseselectamodel"
[Loadingmodels]"
GetDropDownContentsPageMethod"
ParentControlID="
CascadingDropDown3"
DropDownList3"
Color"
Pleaseselectacolor"
[Loadingcolors]"
~/CascadingDropDown/CarsService.asmx"
另外页面上还有一段定义UpdatePanel的代码很典型,可以作为参考:
asp:
UpdatePanelID="
UpdatePanel1"
UpdateMode="
Conditional"
RenderMode="
inline"
ContentTemplate>
LabelID="
Label1"
Text="
[Noresponseprovidedyet]"
/ContentTemplate>
Triggers>
AsyncPostBackTriggerControlID="
EventName="
SelectedIndexChanged"
/Triggers>
/asp:
UpdatePanel>
7.CollapsiblePanel
这个控件几乎在每一个页面上都出现了。
它是非常灵活的一个控件,可以扩展任何ASP.NETPanelcontrol。
在页面上轻松实现展开收缩效果。
这种效果我们最熟悉的恐怕就是XP的文件任务栏了。
(1)CollapsiblePanel默认认为使用了标准CSSboxmodel早期的浏览器要!
DOCTYPE中设置页面为自适应方式提交数据renderedinIE'
sstandards-compliantmode.
(2)可以自动展开自动收缩Autoexpand="
AutoCollapse="
但是这两个本身是互斥的不能同时为True;
如果设置了这两个属性其中一个为True就不要在设置Collapsed="
True"
,这样就没有意义了。
(3)TextLabelID="
这个属性有什么深意\高级的操作么?
我还在研究。
。
CollapsiblePanelExtenderID="
cpe"
Server"
CollapsedSize="
ExpandedSize="
300"
Collapsed="
ExpandControlID="
LinkButton1"
CollapseControlID="
False"
AutoExpand="
ScrollContents="
TextLabelID="
CollapsedText="
ShowDetails"
OpenedText="
HideDetails"
ImageControlID="
Image1"
ExpandedImage="
~/images/collapse.jpg"
CollapsedImage="
~/images/expand.jpg"
ExpandDirection="
Height"
8.ConfirmButton
这个控件是对Button和继承了Button的控件的扩展,它可以捕捉到用户点击了对话框中的“是”“否”;
如果是“是”就继续执行后面的代码,反之就停止执行它默认的提交行为。
(1)要扩展的LinkButtonButton以及ConfirmButtonExtender都要放在updatepanel里面
如果是放在外面,点击“确定”或者“取消”之