目录
  1. WIKI教程
  2. 学习Framework7
  3. Framework7 - 手风琴( Accordion)

Framework7 - 手风琴( Accordion)

描述 (Description)

手风琴是一个图形控制元素，显示为堆叠的项目列表。 每个手风琴都可以expanded或stretched以显示与手风琴相关的内容。

可折叠布局

当您使用单个单独的可折叠元素时，您需要省略accordion-list包装元素。

以下是可折叠布局的结构 - 

<!-- Single collapsible element ------>
<div class = "accordion-item">
   <div class = "accordion-item-toggle"></div>
   <div class = "accordion-item-content"></div>
</div>
<!-- Separate collapsible element -->
<div class = "accordion-item">
   <div class = "accordion-item-toggle"></div>
   <div class = "accordion-item-content"></div>
</div>

Framework7中的以下类用于手风琴 -

S.No 课程和描述
1

accordion-list

它是一个可选类，包含一组手风琴项列表。

2

accordion-item

这是单个手风琴项目的必需类。

3

accordion-item-toggle

它是用于扩展手风琴项目内容的必需类。

4

accordion-item-content

它是隐藏的手风琴项目内容所必需的类。

5

accordion-item-expanded

这是一个扩展的手风琴项目。

Accordion JavaScript API

JavaScript API方法用于以编程方式打开和关闭手风琴。

它包含以下JavaScript API方法 -

  • myApp.accordionOpen(item) - 用于打开手风琴。

  • myApp.accordionClose(item) - 用于关闭手风琴。

  • myApp.accordionToggle(item) - 用于切换手风琴。

所有方法都包含名为item参数，它是HTML或accordion-item的字符串元素。

手风琴活动

Accordion包含下表中列出的四个事件 -

S.No 事件 目标和描述
1open

Accordion item

当您打开动画时，此事件将被触发。

2opened

Accordion item

当动画的开始完成时，此事件将被触发。

3close

Accordion item

关闭动画时，此事件将被触发。

4closed

Accordion item

关闭动画完成后，此事件将被触发。

手风琴列表视图

在手风琴列表视图中，您可以使用item-link元素而不是accordion-toggle 。 

<div class = "list-block accordion-list">
   <ul>
      <li class = "accordion-item">
         <a href = "" class = "item-link item-content">
            <div class = "item-inner">
               <div class = "item-title">1st Item</div>
            </div>
         </a>
         <div class = "accordion-item-content">Content for 1st Item...</div>
      </li>
      <li class = "accordion-item">
         <a href = "" class = "item-link item-content">
            <div class = "item-inner">
               <div class = "item-title">2nd Item</div>
            </div>
         </a>
         <div class = "accordion-item-content">Content for 2nd Item...</div>
      </li>
   </ul>
</div>

例子 (Example)

以下示例演示了在Framework7中使用手风琴 - 

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <title>Accordion</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
   </head>
   <body>
      <div class="views">
         <div class="view view-main">
            <div class="pages">
               <div data-page="home" class="page navbar-fixed">
                  <div class="navbar">
                     <div class="navbar-inner">
                        <div class="left"> </div>
                        <div class="center">Accordion</div>
                        <div class="right"> </div>
                     </div>
                  </div>
                  <div class="page-content">
                     <div class="content-block-title">List of Programming Lagauges</div>
                     <div class="list-block accordion-list">
                        <ul>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">C</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
                                 </div>
                              </div>
                           </li>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">C++</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
                                       This reference will take you through simple and practical approach while learning C++ Programming language.
                                    </p>
                                 </div>
                              </div>
                           </li>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">Java</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
                                       This reference will take you through simple and practical approach while learning Java Programming language.
                                    </p>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     <div class="content-block-title">Separate Collapsibles</div>
                     <div class="list-block">
                        <ul>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">C</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p >C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
                                 </div>
                              </div>
                           </li>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">C++</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
                                       This reference will take you through simple and practical approach while learning C++ Programming language.
                                    </p>
                                 </div>
                              </div>
                           </li>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">Java</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
                                       This reference will take you through simple and practical approach while learning Java Programming language.
                                    </p>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     <div class="content-block-title">Custom Accordion</div>
                     <div class="content-block accordion-list custom-accordion">
                        <div class="accordion-item">
                           <div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C</span></div>
                           <div class="accordion-item-content">
                              <p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
                           </div>
                        </div>
                        <div class="accordion-item">
                           <div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C++</span></div>
                           <div class="accordion-item-content">
                              <p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
                                 This reference will take you through simple and practical approach while learning C++ Programming language.
                              </p>
                           </div>
                        </div>
                        <div class="accordion-item">
                           <div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>Java</span></div>
                           <div class="accordion-item-content">
                              <p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
                                 This reference will take you through simple and practical approach while learning Java Programming language.
                              </p>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      <style>.custom-accordion{padding-left:0;padding-right:0;}.custom-accordion .accordion-item-toggle{padding:0px 15px;height:44px;line-height:44px;font-size:17px;color:#000;border-bottom:1px solid rgba(0,0,0,0.15);cursor:pointer;}.custom-accordion .accordion-item-toggle:active{background:rgba(0,0,0,0.15);}.custom-accordion .accordion-item-toggle span{display:inline-block;margin-left:15px;}.custom-accordion .accordion-item:last-child .accordion-item-toggle{border-bottom:none;}.custom-accordion .icon-plus,.custom-accordion .icon-minus{display:inline-block;width:22px;height:22px;border:1px solid #000;border-radius:100%;line-height:20px;text-align:center;}.custom-accordion .icon-minus{display:none;}.custom-accordion .accordion-item-expanded .icon-minus{display:inline-block;}.custom-accordion .accordion-item-expanded .icon-plus{display:none;}.custom-accordion .accordion-item-content{padding:0px 15px;}</style>
      <script>
         // here initialize the app
         var myApp = new Framework7();
         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;
         // Add the view
         var mainView = myApp.addView('.view-main', {
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });
      </script>
   </body>
</html>

输出 (Output)

让我们执行以下步骤，看看上面给出的代码是如何工作的 -

  • 将上面给出的HTML代码保存为服务器根文件夹中的accordion.html文件。

  • 以http://localhost/accordion.html打开此HTML文件，输出显示如下。

  • 该示例提供了可折叠布局，可以扩展该布局以显示与手风琴相关联的内容。

新页面打开
<上一篇.Framework7 - 列出视图( List Views)
Framework7 - Cards.下一篇>
↑回到顶部↑
WIKI教程 @2018