Question

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

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

Answer 1

您可以尝试使用内置<ons-popover>的{{1}}。

在模板中创建弹出窗口：

<ons-list>

您可以使用以下JavaScript代码显示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>

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

Answer 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();
  });
});

使用onsen UI下拉选项菜单

2 个答案: