使用温泉 UI 的下拉选项菜单答案

【问题标题】：Drop down option menu using onsen UI使用温泉 UI 的下拉选项菜单
【发布时间】：2014-11-25 09:33:46
【问题描述】：

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

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

【问题讨论】：

标签： cordova onsen-ui

【解决方案1】：

您可以尝试使用 <ons-popover> 并在内部使用 <ons-list>。

在模板内创建弹出框：

<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 代码显示弹出框：

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

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

【讨论】：

对我很有用。这正是我正在寻找的@Andreas Argelius

【解决方案2】：

你的意思是这样的吗？

DEMO

html

<ons-modal var="modal">
   <ons-list>

        <ons-list-header>Browsers</ons-list-header>

        <ons-list-item modifier="tappable">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a" checked="checked">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Chrome
          </label>
        </ons-list-item>

        <ons-list-item modifier="tappable">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Safari
          </label>
        </ons-list-item>

        <ons-list-item modifier="tappable">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Internet Explorer
          </label>
        </ons-list-item>

        <ons-list-item modifier="tappable">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Opera
          </label>
        </ons-list-item>

        <ons-list-item modifier="tappable">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Firefox
          </label>
        </ons-list-item>
      </ons-list>
</ons-modal>

<ons-navigator>
  <ons-page id="my-page">
<ons-toolbar>
        <div class="center">Toolbars</div>
        <div class="right">
          <ons-toolbar-button id="show-modal">
            <ons-icon icon="ion-ios7-plus" style="font-size: 32px; width: 1em"> 
          </ons-toolbar-button>
        </div>
      </ons-toolbar>
  </ons-page>
</ons-navigator>

javascript

ons.bootstrap();

$(document.body).on("pageinit", '#my-page', function() {
  $("#show-modal", this).click(function() {
    modal.show();
  });
});

【讨论】：

你得到了我的要求，但不是模态框，它应该是平滑的菜单显示，下面附加到右侧的 (+) 图标。像这样demo.ourtuts.com/menu
有一个简单但肮脏的方法:) 我更新了演示。请看那个。
其实我建议你使用ionicframework。它的 css 框架比 onsenui 简单。
1.2版本有一个新组件，可能就是你要找的，叫popover：onsen.io/guide/components.html#ons-popover