细数Ajax Control Toolkit 34个控件（一）

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(推荐) Limit  Fill
(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("<%= 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'); //这里找的是下拉列表控件,不是Behavior
        if (behavior) {
            var size = 'None'; // 这里顺便看看怎么使用Select
            switch (ctrl.selectedIndex) {
               case 0 :
                    behavior.get_element().style.height = 'auto';
                    size = AjaxControlToolkit.AutoSize.None;
                  break;

                case 1 :
                    behavior.get_element().style.height = '400px';
                    size = AjaxControlToolkit.AutoSize.Fill;
                   break;
                case 2 :
                    behavior.get_element().style.height = '400px';
                   size = AjaxControlToolkit.AutoSize.Limit;
                    break;
            }
            behavior.set_AutoSize(size);
        }
        if (document.focus) {
            document.focus();
       }
    }
</ script >

< ajaxToolkit:Accordion ID = " MyAccordion "  runat = " server "  SelectedIndex = " 0 "  HeaderCssClass = " accordionHeader "
    ContentCssClass = " accordionContent "  FadeTransitions = " false "  FramesPerSecond = " 40 "
    TransitionDuration = " 250 "  AutoSize = " None " >
     < Panes >
         < ajaxToolkit:AccordionPane ID = " AccordionPane1 "  runat = " server " >
            < Header >
                 < a href = ""  onclick = " return false; "   class = " accordionLink " > 1 . Accordion </ a ></ Header >
             < Content >
             </ Content >
         </ ajaxToolkit:AccordionPane >
     </ Panes >
</ ajaxToolkit:Accordion >