zoukankan      html  css  js  c++  java

  • Accordion：可折叠面板的集合

    功能：
             实现了QQ、Msn好友分类的折叠效果，就像包含了多个CollapsiblePanels 。
    常用属性：
          SelectedIndex ： 该控件初次加载时展开的AccordionPane面板的索引值 。
          HeaderCssClass ： 该Accordion中包含的所有AccordionPane面板的标题区域所应用的CSS Class 。
          ContentCssClass ： 该Accordion中包含的所有AccordionPane面板的内容区域所应用的CSS Class 。
          AutoSize ：   在展开具有不同高度的AccordionPane面板时，该Accordion的总高度的变化方式。
                                可选如下3个值：

                                 None：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短。

                                Limit：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短，不过最高不
                                        会超过Accordion的Height属性设定值。若是其内容高度超过了Height属性设定值，则
                                        将自动显示滚动条。

                                Fill：该Accordion的高度将固定为Height属性的设定值，不随当前展开的不同高度
                                     的AccordionPane面板而变化。若是某个AccordionPane的内容高度超过了Height属性设定
                                    值，则将自动显示滚动条。
     FadeTransitions ： 若该属性值设置为true，则在切换当前展开的AccordionPane面板时，将带有淡入淡出效果 
     TransitionDuration ： 展开/折叠一个AccordionPane面板的过程所花费的时间，单位为毫秒。
     FramesPerSecond ： 播放展开/折叠AccordionPane面板动画的每秒钟帧数 。
     DataSourceID ：     页面中某个DataSource控件的ID，用于通过数据绑定自动生成AccordionPane面板 。
     <Panes> ：     该标签内将包含一系列的<ajaxToolkit:AccordionPane>标签，即Accordion- Pane的声明，用来表
                             示 Accordion中包含的面板 。
     <HeaderTemplate> ： 在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的标题
                                         区域中的内容模板 。
     <ContentTemplate> :     在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的正文
                                          。区域中的内容模板
    实例代码：

    </head>
          <body onload="focus();"><a href="http://abcdwxc.cnblogs.com/" target="_blank">Acoordion的实例-------王晓成的博客 
            </a>
      
          <div class="description">
            <ul>
              <li>使用可折叠控件（Accordion）并搭配 5 个可折叠面板（AccordionPane）控件，<strong>一次仅展开一个可折叠面板</strong>。 </li>
              <li>当页面第一次被加载时，会自动展开<strong>第三个</strong>可折叠面板。 </li>
            </ul>
          </div>
        
          <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <div align="center">
              <ajaxToolkit:Accordion ID="Accordion1" 
                                 runat    ="server"
                                 width    ="450px"
                                 ContentCssClass    ="accordionContentDef"
                                 HeaderCssClass    ="accordionHeaderDef"
                                 RequireOpenedPane    ="false"
                                 SelectedIndex    ="2">
                <Panes>
                  <ajaxToolkit:AccordionPane ID="AccordionPane1"
                                         runat    ="server">
                    <Header>
                      <a href="" onclick="return false;">
                    Visual Basic 2005 程序开发与界面设计秘诀
                      </a>
                    </Header>
                    <Content>
                  完全的范例与实作导向，颠覆传统只是纸上谈兵、高谈阔论的写法。通过众多程序范例，
                  务实、深度且精确地切入 Visual Basic 2005 最重要且实用的程序开发与界面设计议题。
                  经过本书的洗礼，相信您能扎实掌握 Visual Basic 2005 的内涵与开发精髓，迅速站上 
                  .NET Framework此一巨人的肩膀，让您的开发生命走得更长、更稳、更辉煌。
                    </Content>
                  </ajaxToolkit:AccordionPane>
                  <ajaxToolkit:AccordionPane ID="AccordionPane2"
                                         runat    ="server">
                    <Header>
                      <a href="" onclick="return false;">
                    Visual Basic 2005 文件 IO 与数据存取秘诀
                      </a>
                    </Header>
                    <Content>
                  学习不在多言，不仅实作，更要实战。本书秉持具体力行的思维，彻底提升读者功力为职志，
                  贡献了 260 个以上的程序范例，针对文件输入输出与数据存取议题，深度剖析。
                    </Content>
                  </ajaxToolkit:AccordionPane>
                  <ajaxToolkit:AccordionPane ID="AccordionPane3"
                                         runat    ="server"
                                         ContentCssClass    ="accordionContentCS"
                                         HeaderCssClass    ="accordionHeaderCS">
                    <Header>
                      <a href="" onclick="return false;">
                    Visual C# 2005 程序开发与界面设计秘诀
                      </a>
                    </Header>
                    <Content>
                  通过众多程序范例，务实、深度且精确地切入Visual C# 2005 最重要且实用的程序开发与接口设计议题。
                  经过本书的洗礼，相信您能扎实掌握 Visual C# 2005 的内涵与开发精髓，迅速站上 
                  .NET Framework此一巨人的肩膀，让您的开发生命走得更长、更稳、更辉煌。
                    </Content>
                  </ajaxToolkit:AccordionPane>
                  <ajaxToolkit:AccordionPane ID="AccordionPane4"
                                         runat    ="server"
                                         ContentCssClass    ="accordionContentCS"
                                         HeaderCssClass    ="accordionHeaderCS">
                    <Header>
                      <a href="" onclick="return false;">
                    Visual C# 2005 文件 IO 与数据存取秘诀
                      </a>
                    </Header>
                    <Content>
                  本书秉持具体力行的思维，彻底提升读者功力为职志，贡献了 260 个以上的程序范例，
                  针对文件输入输出与数据存取议题，深度剖析。希望透过无私的心得分享，与大家一起再创颠峰，
                  将开发生命提升至一个全新的境界。
                    </Content>
                  </ajaxToolkit:AccordionPane>
                  <ajaxToolkit:AccordionPane ID="AccordionPane5"
                                         runat    ="server"
                                         ContentCssClass    ="accordionContentSQL"
                                         HeaderCssClass    ="accordionHeaderSQL">
                    <Header>
                      <a href="" onclick="return false;">
                    Microsoft SQL Server 2005 完全实战
                      </a>
                    </Header>
                    <Content>
                  使用了近 600 个指令文件（.sql）与数个Windows应用程序及类库项目，详实且深入探讨 
                  SQL Server 2005 的“数据库创建”、“Transact-SQL程序设计”与 XML 等三大核心领域，
                  打下不可动摇的根基。
                    </Content>
                  </ajaxToolkit:AccordionPane>
                </Panes>
              </ajaxToolkit:Accordion>
            </div>
            <p />
            <div align="center">
              <table>
                <tr align="left">
                  <td>
                是否使用    <strong>“淡出效果”</strong>：
                    <input id="FadeMode" type="checkbox" onclick="toggleFade();" value="false" />
                  </td>
                </tr>
                <tr align="left">
                  <td>
                设定    <strong>「AutoSize」</strong>模式：
                    <select id="AutoSizeMode" onchange="changeAutoSizeMode();">
                      <option value="0" selected>None</option>
                      <option value="1">Fill</option>
                      <option value="2">Limit</option>
                    </select>
                  </td>
                </tr>
              </table>
            </div>
          </form>
    </body>

    样式如下：

    <style type="text/css">
          /* 预设的标头样式表 */
      .accordionHeaderDef
          {
        border    : 2px solid #0B0109;
        background-color    : #8B7149;
        font-weight    : bold;
        padding    : 5px;
        margin-top    : 5px;
        cursor    : pointer;
        text-align    : center;
          }

          /* 预设的内容样式表 */
      .accordionContentDef
          {
        border    : thick ridge #FFD8D8;
        background-color    : #A7D9AF;
        border-top    : none;
        padding    : 5px;
        padding-top    : 10px;
        text-align    : left;
          }

          /* 预设的标头之超级链接样式表 */
      .accordionHeaderDef a
          {
        color    : #FFFFCC;
        text-decoration    : none;
          }

          /* 当鼠标移过预设的标头之超级链接样式表 */
      .accordionHeaderDef a:hover
          {
        background-color    : LightSlateGray; 
        color    : Yellow;
        text-decoration    : underline overline;
          }
          /* C# 类的标头样式表 */
      .accordionHeaderCS
          {
        border    : 2px solid #040D0D;
        background-color    : #B4CDCD;
        font-weight    : bold;
        padding    : 5px;
        margin-top    : 5px;
        cursor    : pointer;
        text-align    : center;
          }

          /* C# 类的内容样式表 */
      .accordionContentCS
          {
        border    : thick ridge #2FFBFB;
        background-color    : #F0D8DB;
        border-top    : none;
        padding    : 5px;
        padding-top    : 10px;
        text-align    : left;
          }

          /* C# 类的标头之超级链接样式表 */
      .accordionHeaderCS a
          {
        color    : #0000FF;
        text-decoration    : none;
          }

          /* 当鼠标移过 C# 类的标头之超级链接样式表 */
      .accordionHeaderCS a:hover
          {
        background-color    : LightSlateGray; 
        color    : Yellow;
        text-decoration    : underline overline;
          }

          /* SQL 类的标头样式表 */
      .accordionHeaderSQL
          {
        border    : 2px solid #0C0C0A;
        background-color    : #9C8C5A;
        font-weight    : bold;
        padding    : 5px;
        margin-top    : 5px;
        cursor    : pointer;
        text-align    : center;
          }

          /* SQL 类的内容样式表 */
      .accordionContentSQL
          {
        border    : thick ridge #FFD8D8;
        background-color    : #E7E3C9;
        border-top    : none;
        color    : #000000;
        padding    : 5px;
        padding-top    : 10px;
        text-align    : left;
          }

          /* SQL 类的标头之超级链接样式表 */
      .accordionHeaderSQL a
          {
        color    : #FFFFFF;
        text-decoration    : none;
          }

          /* 当鼠标移过 SQL 类的标头之超级链接样式表 */
      .accordionHeaderSQL a:hover
          {
        background-color    : LightSlateGray; 
        color    : Yellow;
        text-decoration    : underline overline;
          }

      </style>

    脚本代码如下：

    <script language="javascript" type="text/javascript">
          // 设定「淡出效果」属性。
      function toggleFade()
          {
            // 找出 ID 属性值为 Accordion1_AccordionExtender 的手风琴折之行为。
        var behavior = $find('Accordion1_AccordionExtender');
            if (behavior)
            {
              // 设定是否使用淡出效果。
          behavior.set_FadeTransitions(!behavior.get_FadeTransitions());
              // 显示淡出效果所花费的时间要多久（单位：毫秒）。
          // 若不指定时，这个时间会是 250 毫秒。
          behavior.set_TransitionDuration(1000);
              // 于淡出效果的转换中，每秒要使用多少个画格（Frame）。
          // 若不指定时，会使用 40 个画格。
          behavior.set_FramesPerSecond(100);
        }
      }

          // 设定自动调整大小（AutoSize）的模式。
      function changeAutoSizeMode()
          {
            // 找出 ID 属性值为 Accordion1_AccordionExtender 的手风琴折之行为。
        var behavior = $find('Accordion1_AccordionExtender');
            // 找出 ID 属性值为 AutoSizeMode 的项目。
        var ctrl = $get('AutoSizeMode');

            if (behavior)
            {
              // 定义 AutoSize 变量。
          var size;
              // 取得所指定的 AutoSize 模式。
          switch (ctrl.selectedIndex)
              {
                // None 模式。
            case 0:
              behavior.get_element().style.height     = '400px';
              size     = AjaxControlToolkit.AutoSize.None;
                  break;
                // Fill 模式。
            case 1:
              behavior.get_element().style.height     = '400px';
              size     = AjaxControlToolkit.AutoSize.Fill;
                  break;
                // Limit 模式。
            case 2:
              behavior.get_element().style.height     = '400px';
              size     = AjaxControlToolkit.AutoSize.Limit;
                  break;
          }
              // 设定 Accordion1_AccordionExtender 的手风琴折之 AutoSize 行为。
          behavior.set_AutoSize(size);
        }
      }
          </script>

    运行结果如下：
  • 相关阅读:
    程序数据集算地数据库
    使用属性升级mybank
    第一个C#程序
    CSS3动画
    定位网页元素的解析
    CSS3中的浮动
    CSS中的盒子模型
    （十三）mybatis 整合 ehcache
    （十二）mybatis 查询缓存
    （十一）延迟加载
  • 原文地址：https://www.cnblogs.com/abcdwxc/p/938219.html
Copyright © 2011-2022 走看看