Учебники

Framework7 — Аккордеон

Декабрь 31, 2018

Гармошка — это графический элемент управления, отображаемый в виде списка предметов. Каждый аккордеон может быть расширен или растянут, чтобы показать содержание, связанное с этим аккордеоном.

Разборный макет

Когда вы используете отдельный отдельный складной элемент, вам нужно пропустить элемент — оболочку 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

аккордеона список

Это необязательный класс, который содержит группу элементов списка аккордеона.

2

аккордеона пункт

Это обязательный класс для одного предмета аккордеона.

3

аккордеона пункт-переключатель

Это обязательный класс, используемый для расширения содержимого аккордеонных предметов.

4

аккордеона пункт-контент

Это обязательный класс, используемый для скрытого содержания аккордеонных предметов.

5

аккордеона элемент вспененные

Это один расширенный аккордеонный предмет.

аккордеона список

Это необязательный класс, который содержит группу элементов списка аккордеона.

аккордеона пункт

Это обязательный класс для одного предмета аккордеона.

аккордеона пункт-переключатель

Это обязательный класс, используемый для расширения содержимого аккордеонных предметов.

аккордеона пункт-контент

Это обязательный класс, используемый для скрытого содержания аккордеонных предметов.

аккордеона элемент вспененные

Это один расширенный аккордеонный предмет.

Аккордеонный JavaScript API

Методы JavaScript API используются для программного открытия и закрытия аккордеона.

Он содержит следующие методы JavaScript API —

  • myApp.accordionOpen (item) — используется для открытия аккордеона.

  • myApp.accordionClose (item) — используется для закрытия аккордеона.

  • myApp.accordionToggle (item) — используется для переключения аккордеона.

myApp.accordionOpen (item) — используется для открытия аккордеона.

myApp.accordionClose (item) — используется для закрытия аккордеона.

myApp.accordionToggle (item) — используется для переключения аккордеона.

Все методы содержат параметр item, который является HTML или строковым элементом accordion-item.

Аккордеонные События

Аккордеон содержит четыре события, перечисленные в следующей таблице:

S.No Событие Цель и описание
1 открыть

Аккордеонный предмет

Когда вы открываете анимацию, это событие будет запущено.

2 открытый

Аккордеонный предмет

Когда открытие анимации будет завершено, это событие будет запущено.

3 близко

Аккордеонный предмет

Когда вы закрываете анимацию, это событие будет запущено.

4 закрыто

Аккордеонный предмет

Когда закрытие анимации будет завершено, это событие будет запущено.

Аккордеонный предмет

Когда вы открываете анимацию, это событие будет запущено.

Аккордеонный предмет

Когда открытие анимации будет завершено, это событие будет запущено.

Аккордеонный предмет

Когда вы закрываете анимацию, это событие будет запущено.

Аккордеонный предмет

Когда закрытие анимации будет завершено, это событие будет запущено.

Аккордеонный Список

В представлении списка аккордеонов вы можете использовать элемент item-link вместо аккордеон-переключателя . 

<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>

пример

Следующий пример демонстрирует использование аккордеона в 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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

Сохраните приведенный выше HTML-код как файл accordion.html в корневой папке вашего сервера.

Откройте этот HTML-файл как http: //localhost/accordion.html, и вывод отобразится, как показано ниже.

В примере представлен разборный макет, который можно развернуть для отображения содержимого, связанного с аккордеоном.

38
Share: