细数Ajax Control Toolkit 34个服务器端控件(转)

======================================================
注：本文源代码点此下载
======================================================

转自http://www.cnblogs.com/me-sa/archive/2007/04/06/702803.html

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(推荐) limitfill

(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");

【代码示意】

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】 执行一段脚本的action

(8) 【action】 隐藏目标的控件

(9) 【action】 设置透明度的action

(10)【animation】淡入淡出

(11)【animation】控制目标元素的大小但是注意: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.

(12) 【animation】

脉搏跳动效果

(13)【animation】颜色渐变效果,设置起始结束颜色就可以

(14)【animation】 改变元素的大小action

(15)动画效果是在用户某一个动作发生的时候触发,触发的时机包括:onloadonclickonmouseover 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中呢?期待中……

【示意代码】

代码示意:

extract from profile

" />

ajaxtoolkit:validatorcalloutextender runat="server" id="pnreqe" targetcontrolid="pnreq" highlightcssclass="highlight" width="350px" />

还有一段:

代码示意:

asp:requiredfieldvalidator runat="server" id="nreq" controltovalidate="nametextbox" display="none" errormessage="required field missing

a name is required." />

asp:requiredfieldvalidator runat="server" id="pnreq" controltovalidate="phonenumbertextbox" display="none" errormessage="required field missing

a phone number is required.

other options:

extract from profile

" />

asp:regularexpressionvalidator runat="server" id="pnregex" controltovalidate="phonenumbertextbox" display="none" errormessage="invalid field

please enter a phone number in the format:

(###) ###-####" validationexpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}" />

cc1:validatorcalloutextender runat="server" id="nreqe" targetcontrolid="nreq" highlightcssclass="highlight" />

cc1:validatorcalloutextender runat="server" id="pnreqe" targetcontrolid="pnreq" highlightcssclass="highlight" width="350px" />

cc1:validatorcalloutextender runat="server" id="pnreqex" targetcontrolid="pnregex" highlightcssclass="highlight" />

33. listsearchextender

【功能概述】

支持对listbox or dropdownlist的扩展通过用户键入的字符对列表中的数据进行过滤,在winform中做的更好一些。顺便说一下在winform里面以前在vs6.0的时代我们是怎么实现这个功能的呢?还记得吗?sendmessage函数向listbox或者combox发送find_text消息,很怀旧了

【细节】

1.prompttext属性的作用有两个,一是显示提示信息,省的用户不知道还有这个功能。再者就是即时的显示用户输入的数据。

2.在safari中dropdownlist扩展失效;opera中后退键会被认为要后退一页!!!

3.显然这个控件如果还有什么要说的就是可以设置prompt信息的外观(样式+位置)

看代码:

好文要顶关注我收藏该文与我联系

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/