首页 > 移动平台 > 详细

移动端安卓和IOS开发框架Framework7教程-Popover 布局

时间：2016-06-06 02:12:32      阅读：201      评论：0      收藏：0      [点我收藏+]

操作表是一个上滑面板，用来向用户展示进行一个任务所需的选项。

你也可以使用它来提示用户，确认潜在的危险操作。

操作表包含一个可选的标题和至少一个按钮，每个按钮都对应一个操作。

注意，不建议在大屏幕（iPad）上使用操作表。在大屏幕上，你应该使用弹出框。

创建并弹出操作表

操作表是动态元素，只能使用Javascript来创建并弹出它。让我们看一下创建操作表相关的App方法：

myApp.actions(groups) - 创建并弹出操作表，其包含指定数量群组的按钮
或者
myApp.actions(buttons) - 创建并弹出操作表，其包含一个群组，群组包含指定数量的按钮

  • groups - array. 一组群组，每个群组包含若干按钮
  • buttons - array. 一组按钮，这种情况下，只有一个群组
  • 这个方法返回动态创建的操作表HTML元素

每个在buttons中的按钮应该作为一个对象，其包含如下参数：

参数 类型 默认值 描述
text 字符串 ? 按钮上的文本（可以是HTML字符串）
bold 布尔值 false 可选，若为真，则按钮上文本加粗
color 字符串 ? 可选，按钮颜色，待选颜色有10种
bg string ? Optional. Button background color, one of 10 default colors
label 布尔值 true 可选，若为真，它会成为标题，而不是按钮
disabled boolean false Optional. Set to "true" if you want to make button disabled
onClick 函数 ? 可选，当用户点击该按钮时，会调用这个函数

让我们来看一下例子

  1. <body>
  2. ??...
  3. ??<div?class="page-content">
  4. ????<div?class="content-block">
  5. ??????<p><a?href="#"?class="ac-1">One?group,?three?buttons</a></p>
  6. ??????<p><a?href="#"?class="ac-2">One?group,?title,?three?buttons</a></p>
  7. ??????<p><a?href="#"?class="ac-3">Two?groups</a></p>
  8. ??????<p><a?href="#"?class="ac-4">Three?groups</a></p>
  9. ??????<p><a?href="#"?class="ac-5">With?callbacks?on?click</a></p>
  10. ????</div>
  11. ??</div>
  12. ??...
  13. </body>
复制
  1. var?myApp?=?new?Framework7();
  2. ?
  3. var?$$?=?Dom7;
  4. ?
  5. //-?One?group,?three?buttons
  6. $$(‘.ac-1‘).on(‘click‘,?function?()?{
  7. ????var?buttons?=?[
  8. ????????{
  9. ????????????text:?‘Button1‘,
  10. ????????????bold:?true
  11. ????????},
  12. ????????{
  13. ????????????text:?‘Button2‘
  14. ????????},
  15. ????????{
  16. ????????????text:?‘Cancel‘,
  17. ????????????color:?‘red‘
  18. ????????},
  19. ????];
  20. ????myApp.actions(buttons);
  21. });
  22. ?
  23. //-?One?group,?title,?three?buttons
  24. $$(‘.ac-2‘).on(‘click‘,?function?()?{
  25. ????var?buttons?=?[
  26. ????????{
  27. ????????????text:?‘Do?something‘,
  28. ????????????label:?true
  29. ????????},
  30. ????????{
  31. ????????????text:?‘Button1‘,
  32. ????????????bold:?true
  33. ????????},
  34. ????????{
  35. ????????????text:?‘Button2‘,
  36. ????????},
  37. ????????{
  38. ????????????text:?‘Cancel‘,
  39. ????????????color:?‘red‘
  40. ????????},
  41. ????];
  42. ????myApp.actions(buttons);
  43. });
  44. ?
  45. //-?Two?groups
  46. $$(‘.ac-3‘).on(‘click‘,?function?()?{
  47. ????var?buttons1?=?[
  48. ????????{
  49. ????????????text:?‘Do?something‘,
  50. ????????????label:?true
  51. ????????},
  52. ????????{
  53. ????????????text:?‘Button1‘,
  54. ????????????bold:?true
  55. ????????},
  56. ????????{
  57. ????????????text:?‘Button2‘,
  58. ????????}
  59. ????];
  60. ????var?buttons2?=?[
  61. ????????{
  62. ????????????text:?‘Cancel‘,
  63. ????????????color:?‘red‘
  64. ????????}
  65. ????];
  66. ????var?groups?=?[buttons1,?buttons2];
  67. ????myApp.actions(groups);
  68. });
  69. ?
  70. //-?Three?groups
  71. $$(‘.ac-4‘).on(‘click‘,?function?()?{
  72. ????var?buttons1?=?[
  73. ????????{
  74. ????????????text:?‘Share‘,
  75. ????????????label:?true
  76. ????????},
  77. ????????{
  78. ????????????text:?‘Mail‘,
  79. ????????},
  80. ????????{
  81. ????????????text:?‘Messages‘,
  82. ????????}
  83. ????];
  84. ????var?buttons2?=?[
  85. ????????{
  86. ????????????text:?‘Social?share‘,
  87. ????????????label:?true
  88. ????????},
  89. ????????{
  90. ????????????text:?‘Facebook‘,
  91. ????????},
  92. ????????{
  93. ????????????text:?‘Twitter‘,
  94. ????????}
  95. ????];
  96. ????var?buttons3?=?[
  97. ????????{
  98. ????????????text:?‘Cancel‘,
  99. ????????????color:?‘red‘
  100. ????????}
  101. ????];
  102. ????var?groups?=?[buttons1,?buttons2,?buttons3];
  103. ????myApp.actions(groups);
  104. });
  105. ?
  106. //-?With?callbacks?on?click
  107. $$(‘.ac-5‘).on(‘click‘,?function?()?{
  108. ????var?buttons?=?[
  109. ????????{
  110. ????????????text:?‘Button1‘,
  111. ????????????onClick:?function?()?{
  112. ????????????????myApp.alert(‘Button1?clicked‘);
  113. ????????????}
  114. ????????},
  115. ????????{
  116. ????????????text:?‘Button2‘,
  117. ????????????onClick:?function?()?{
  118. ????????????????myApp.alert(‘Button2?clicked‘);
  119. ????????????}
  120. ????????},
  121. ????????{
  122. ????????????text:?‘Cancel‘,
  123. ????????????color:?‘red‘,
  124. ????????????onClick:?function?()?{
  125. ????????????????myApp.alert(‘Cancel?clicked‘);
  126. ????????????}
  127. ????????},
  128. ????];
  129. ????myApp.actions(buttons);
  130. });
复制

实例预览

把操作表转换成 Popover

因为不建议在手机上使用Popover，不建议在平板上使用操作表，所以我们提供了方法你可以用操作表的拓展语法在平板上自动把操作表转换成Popover：

myApp.actions(target, groups) - ?创建并打开一个包含指定多组按钮的操作表（在平板电脑上是Popover）
or?
myApp.actions(target, buttons) - 创建并打开一个包含指定一组按钮的操作表（在平板电脑上是Popover）

  • target - HTMLElement or string (CSS选择器)触发元素，用来对Popover进行定位. 必须
  • groups - array. 多组按钮组，每个按钮组里面包含多个按钮。
  • buttons - array. 一组按钮。
  1. var?myApp?=?new?Framework7();
  2. ?
  3. var?$$?=?Dom7;
  4. ?
  5. $$(‘.something‘).on(‘click‘,?function?(e)?{
  6. ????var?target?=?this;
  7. ????var?buttons?=?[
  8. ????????{
  9. ????????????text:?‘Button?1‘
  10. ????????},
  11. ????????{
  12. ????????????text:?‘Button?2‘
  13. ????????}
  14. ????];
  15. ????myApp.actions(target,?buttons);
  16. });
复制

关闭操作表

默认情况下，操作表会在以下情况下自动关闭：

  • 点击任意一个按钮
  • 点击窗口之外的遮罩（可以通过modalActionsCloseByOutside这个应用初始化参数配置）

也可以使用适当的App方法来手动关闭操作表：

myApp.closeModal(actionSheet) - 关闭弹出窗口

  • actionSheet - 表示要关闭的操作表的HTML元素或者（包含CSS选择器的）字符串。可选，如果没有指定，任何打开的操作表都会被关闭

操作表事件

操作表和任意模态框拥有相同的事件

事件 目标 描述
open 操作表元素<div class="actions-modal"> 当操作表开始弹出动画的时候，事件触发
opened 操作表元素<div class="actions-modal"> 当操作表完成弹出动画的时候，事件触发
close 操作表元素<div class="actions-modal"> 当操作表开始结束动画的时候，事件触发
closed 操作表元素<div class="actions-modal"> 当操作表完成结束动画的时候，事件触发

操作表模板

如果你希望能自定义操作表的模板，你可以在初始化App的时候传入一个?modalActionsTemplate?参数。这个参数值是一个 Template7 模板字符串，这个模板会被 Template7 编译，编译的时候会传入一个?groups?参数。

比如模板可能会是这样的：

  1. <!--?This?template?equalt?to?default?layout?-->
  2. <div?class="actions-modal">
  3. ??<!--?this?is?a?single?group?-->
  4. ??{{#each?this}}
  5. ????<div?class="actions-modal-group">
  6. ??????<!--?now?this?represents?a?single?button?-->
  7. ??????{{#each?this}}
  8. ??????????{{#if?label}}
  9. ????????????<span?class="actions-modal-label">{{text}}</span>
  10. ??????????{{else}}
  11. ????????????<div?class="actions-modal-button?{{#if?color}}color-{{color}}{{/if}}?{{#if?bold}}actions-modal-button-bold{{/if}}">{{text}}</div>
  12. ??????????{{/if}}
  13. ??????{{/each}}
  14. ????</div>
  15. ??{{/each}}
  16. </div>
复制

Action Sheet To Popover Template

If you use convertation of Action Sheet to Popover, then you may customize Popover template by passingmodalActionsToPopoverTemplate?parameter on App initialization. This parameter accepts Template7 formatted HTML string that will be compiled by Template7 with passed?groups?context.

Here is the default template:

  1. <div?class="popover?actions-popover">
  2. ??<div?class="popover-inner">
  3. ????{{#each?this}}
  4. ????<div?class="list-block">
  5. ??????<ul>
  6. ????????{{#each?this}}
  7. ????????{{#if?label}}
  8. ????????<li?class="actions-popover-label?{{#if?color}}color-{{color}}{{/if}}?{{#if?bold}}actions-popover-bold{{/if}}">{{text}}</li>
  9. ????????{{else}}
  10. ????????<li><a?href="#"?class="item-link?list-button?{{#if?color}}color-{{color}}{{/if}}?{{#if?bg}}bg-{{bg}}{{/if}}?{{#if?bold}}actions-popover-bold{{/if}}?{{#if?disabled}}disabled{{/if}}">{{text}}</a></li>
  11. ????????{{/if}}
  12. ????????{{/each}}
  13. ??????</ul>
  14. ????</div>
  15. ????{{/each}}
  16. ??</div>
  17. </div>
复制
?

移动端安卓和IOS开发框架Framework7教程-Popover 布局

原文：http://zaixianshouce.iteye.com/blog/2303023
踩
(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 版权所有
打开技术之扣，分享程序人生！