移动端安卓和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. });

复制