使用onsen UI下拉选项菜单 [英] Drop down option menu using onsen UI

问题描述

我想开发下拉菜单标题可用在android导航工具栏。我使用phonegap& onsen UI框架开发移动应用。我可以从左边和右边加载滑动菜单。

I want to develop drop down menu header as available in android navigation toolbar. I am using phonegap & onsen UI Framework to develop mobile application. I can able to load sliding menu from left & right side but right now my requirement is to open drop down if one should press icon display in image.

如果用户按下选项按钮，应该显示相同的列表（打开）电话设备。我不使用jquery或jquery移动开发移动UI。我不想开发下拉菜单使用html5& css，所以我请求你让我知道一些替代方法来处理它。

Same list should be displayed(open) if user press option button from phone device. I am not using jquery or jquery mobile to develop mobile UI. I don't want to develop drop down menu using html5 & css, so I request you please let me know some alternative way to handle it.

推荐答案

您可以尝试使用< ons-popover> < ons-list> 里面。

You could try using <ons-popover> with an <ons-list> inside.

在模板中创建popover：

Create the popover inside a template:

<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：

You can show the popover using the following JavaScript code:

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

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

I've created an example that shows how you can use it as a dropdown menu: http://codepen.io/argelius/pen/zxGEza

这篇关于使用onsen UI下拉选项菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！