使用onsen UI下拉选项菜单

Question

我想开发android导航工具栏中提供的下拉菜单标题.我正在使用phonegap和onsen UI Framework来开发移动应用程序.我可以从左侧和右侧加载滑动菜单,但是现在我的要求是打开下拉菜单,如果应该按下图像中的图标显示.

如果用户从电话设备按下选项按钮,则应显示(打开)相同的列表.我没有使用jquery或jquery mobile来开发移动UI.我不想使用html5和css开发下拉菜单,所以我请你告诉我一些替代方法来处理它.

Answer 1

你可以尝试使用<ons-popover>带<ons-list>内.

在模板中创建popover:

<ons-template id="popover.html>
  <ons-popover direction="down" cancelable>
    <ons-list>
      <ons-list-item modifier="tappable">Option 1</ons-list-item>
      ...
    </ons-list>
  </ons-popover>
</ons-template>

您可以使用以下JavaScript代码显示popover:

ons.createPopover('popover.html').then(function(popover) {
  popover.show();
});

我创建了一个示例,说明如何将其用作下拉菜单:http: //codepen.io/argelius/pen/zxGEza