首页 > 移动平台 > 详细

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

时间：2016-05-25 02:17:16      阅读：346      评论：0      收藏：0      [点我收藏+]

手风琴布局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. });
复制

?

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

原文：http://zaixianshouce.iteye.com/blog/2299897
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！