[计算机软件及应用]AJAX控件介绍.docVIP

/u1/44087/showart_358464.html /ajax/ajaxcontroltoolkit/Samples/Accordion/Accordion.aspx Accordion 【功能概述】Accordion可以让你设计多个panel 并且一次只显示一个Panel .在页面上的显示效果就像是使用了多个CollapsiblePanels只不过每一次只展开其中一个CollapsiblePanel.Accordion控件内部包含了若干个AccordionPane，每一个AccordionPane的template里包括了对其Header和Content的定义。我们可以在后台代码中通过SelectedIndex属性取得当前展开的哪一个Panel，还可以控制哪一个Panel展开。 经常可以见到类似的效果，比如QQ、Msn好友分类的折叠效果。 【细节】 现在我们简单介绍一下面用到的Accordion的要用到的几个重要属性：????????????SelectedIndex=“0”?? //刚进页面显示第一个AccordionPane中的内容????????? AutoSize=Limit?? //AutoSize选择Limit表示超出宽度和长度显示流动条????????? Width=450px?? 宽度????????? Height=350px? 高度????????? ContentCssClass=accordionContent? //内容样式????????? HeaderCssClass=accordionHeader???? //头部样式????? ????????? FadeTransitions=true????????????? //true表示使用淡入效果????????? TransitionDuration=250???????? //淡入时间（单位毫秒）????????? FramesPerSecond=40????????????? //每秒帧数 下面是实现具体过程： ? 首先是样式：（注：accordionHeader是头部样式，accordionContent是内容样式， cursor: pointer;表示的是当鼠标移动到该位置时变成手形， (1)不要把Accordion放在Table中而又把 FadeTransitions 设置为True，这将引起布局混乱 (2) 在AccordionPane模板中的Content中可以定义任何Web元素，表现的就像一个容器 (3) AccordionPane内容模板自动改变大小有三种AutoSize modes ：None(推荐) Limit Fill (4) $find(ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender)这里找到的是Behavior.什么是Behavior呢？在A Ajax框架中包含一组动作并完成一个功能. Accordion的一个Behavior就是淡入淡出. 找到Behavior的引用，behavior.set_FadeTransitions() behavior.get_FadeTransitions()的方式来实现具体某一个Behavior的访问和修改. var behavior = $find(ctl00_SampleContent_MyAccordion_AccordionExtender);这种写法是不好的，我们在自动测试的页面中发现了更好的写法： var behavior=$find(%= MyAccordion.ClientID %_AccordionExtender); 【代码示意】 script language=javascript type=text/javascript function toggleFade() { ?? var behavior = $find(ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender); ?? if (behavior) ?? { ???? behavior.set_FadeTransitions(!behavior.get_FadeTransitions()); ??? } } function changeAutoSize() { ?? var behavior = $find(ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender); ?? var ctrl = $get(autosize); //这里找的是下拉列表控件,不是