移动端安卓和IOS开发框架Framework7教程-手风琴布局/可折叠布局

手风琴布局Accordion Layout

通常,手风琴布局可以这样实现:

  1. <div class="accordion-list">
  2.     <div class="accordion-item">
  3.         <div class="accordion-item-toggle">...</div>
  4.         <div class="accordion-item-content">...</div>
  5.     </div>
  6.     <div class="accordion-item accordion-item-expanded">
  7.         <div class="accordion-item-toggle">...</div>
  8.         <div class="accordion-item-content">...</div>
  9.     </div>
  10.     <div class="accordion-item">
  11.         <div class="accordion-item-toggle">...</div>
  12.         <div class="accordion-item-content">...</div>
  13.     </div>
  14.     ...
  15. </div>
复制

上面的代码:

  • accordion-list - 多个手风琴元素的列表. 可选
    • accordion-item - 单个手风琴元素. 必选
      • accordion-item-toggle - 用来展开/折叠手风琴元素内容的开关. 必选
      • accordion-item-content - 隐藏的手风琴元素的内容. 必选
    • accordion-item-expanded - 展开的手风琴元素

折叠布局(Collapsible Layout)

如果你希望独立的可折叠元素,你可以不使用"accordion-list"包裹元素:

  1.     <!-- Single collapsible element -->
  2.     <div class="accordion-item">
  3.         <div class="accordion-item-toggle">...</div>
  4.         <div class="accordion-item-content">...</div>
  5.     </div>
  6.     <!-- Another separate collapsible element -->
  7.     <div class="accordion-item">
  8.         <div class="accordion-item-toggle">...</div>
  9.         <div class="accordion-item-content">...</div>
  10.     </div>
复制

手风琴列表视图(Accordion List View)

如果你希望给列表视图加上手风琴布局,你应该使用"item-link"元素而不是"accordion-toggle"元素:

  1. <div class="list-block accordion-list">
  2.     <ul>
  3.         <li class="accordion-item">
  4.             <a href="" class="item-link item-content">
  5.                 <div class="item-inner">
  6.                     <div class="item-title">Item 1</div>
  7.                 </div>
  8.             </a>
  9.             <div class="accordion-item-content">Item 1 content ...</div>
  10.         </li>
  11.         <li class="accordion-item">
  12.             <a href="" class="item-link item-content">
  13.                 <div class="item-inner">
  14.                     <div class="item-title">Item 2</div>
  15.                 </div>
  16.             </a>
  17.             <div class="accordion-item-content">Item 2 content ...</div>
  18.         </li>
  19.     </ul>
  20. </div>
复制

示例

  1. <!-- List View -->
  2. <div class="content-block-title">List View Accordion</div>
  3. <div class="list-block accordion-list">
  4.   <ul>
  5.     <li class="accordion-item"><a href="#" class="item-content item-link">
  6.         <div class="item-inner">
  7.           <div class="item-title">Item 1</div>
  8.         </div></a>
  9.       <div class="accordion-item-content">
  10.         <div class="content-block">
  11.           <p>Item 1 content. Lorem ipsum dolor sit amet...</p>
  12.         </div>
  13.       </div>
  14.     </li>
  15.     <li class="accordion-item"><a href="#" class="item-content item-link">
  16.         <div class="item-inner">
  17.           <div class="item-title">Item 2</div>
  18.         </div></a>
  19.       <div class="accordion-item-content">
  20.         <div class="content-block">
  21.           <p>Item 2 content. Lorem ipsum dolor sit amet...</p>
  22.         </div>
  23.       </div>
  24.     </li>
  25.     ...
  26.   </ul>
  27. </div>
  28. <!-- Separate collapsibles - omit "accordion-list" class-->
  29. <div class="content-block-title">Separate Collapsibles</div>
  30. <div class="list-block">
  31.   <ul>
  32.     <li class="accordion-item"><a href="#" class="item-content item-link">
  33.         <div class="item-inner">
  34.           <div class="item-title">Item 1</div>
  35.         </div></a>
  36.       <div class="accordion-item-content">
  37.         <div class="content-block">
  38.           <p>Item 1 content. Lorem ipsum dolor sit amet...</p>
  39.         </div>
  40.       </div>
  41.     </li>
  42.     <li class="accordion-item"><a href="#" class="item-content item-link">
  43.         <div class="item-inner">
  44.           <div class="item-title">Item 2</div>
  45.         </div></a>
  46.       <div class="accordion-item-content">
  47.         <div class="content-block">
  48.           <p>Item 2 content. Lorem ipsum dolor sit amet...</p>
  49.         </div>
  50.       </div>
  51.     </li>
  52.     ...
  53.   </ul>
  54. </div>
  55. <!-- Custom Accordion -->
  56. <div class="content-block-title">Custom Accordion</div>
  57. <div class="content-block accordion-list custom-accordion">
  58.   <div class="accordion-item">
  59.     <div class="accordion-item-toggle">
  60.       <i class="icon icon-plus">+</i>
  61.       <i class="icon icon-minus">-</i>
  62.       <span>Item 1</span>
  63.     </div>
  64.     <div class="accordion-item-content">
  65.       <p>Item 1 content. Lorem ipsum dolor sit amet...</p>
  66.     </div>
  67.   </div>
  68.   <div class="accordion-item">
  69.     <div class="accordion-item-toggle">
  70.       <i class="icon icon-plus">+</i>
  71.       <i class="icon icon-minus">-</i>
  72.       <span>Item 2</span>
  73.     </div>
  74.     <div class="accordion-item-content">
  75.       <p>Item 2 content. Lorem ipsum dolor sit amet...</p>
  76.     </div>
  77.   </div>
  78.   ...
  79. </div>
复制

实例预览

JavaScript API

手风琴组件有JavaScript API,你可以在JS中控制打开和关闭。方法说明如下:

myApp.accordionOpen(item) - 打开指定的条目

  • item - HTMLElement or string (想要操作的条目的CSS选择器 (<div class="accordion-item">). 必须。

myApp.accordionClose(item) - 关闭指定条目

  • item - HTMLElement or string (想要操作的条目的CSS选择器 (<div class="accordion-item">). 必须

myApp.accordionToggle(item) - toggle 指定条目

  • item - HTMLElement or string (想要操作的条目的CSS选择器 (<div class="accordion-item">). Required

事件

手风琴有这些事件:

事件名称 Target 说明
open Accordion item<div class="accordion-item"> 某一条目开始执行打开动画的时候会触发
opened Accordion item<div class="accordion-item"> 某一条目完成打开动画后触发
close Accordion item<div class="accordion-item"> 某一条目开始执行关闭动画的时候会触发
closed Accordion item<div class="accordion-item"> 某一条目完成关闭动画后触发
  1. var myApp = new Framework7();
  2.  
  3. var $$ = Dom7;
  4.  
  5. $$('.accordion-item').on('opened', function () {
  6.   myApp.alert('Accordion item opened');
  7. }); 
  8.  
  9. $$('.accordion-item').on('closed', function (e) {
  10.   myApp.alert('Accordion item closed');
  11. });
复制

 

你可能感兴趣的:(Framework7)