Выпадающее меню опций с использованием пользовательского интерфейса onsen

Я хочу разработать заголовок раскрывающегося меню, доступный на панели инструментов навигации Android. Я использую phonegap & onsen UI Framework для разработки мобильного приложения. Я могу загрузить скользящее меню с левой и правой стороны, но сейчас мое требование - открыть раскрывающийся список, если нужно нажать значок на изображении.

Тот же список должен отображаться (открыт), если пользователь нажимает кнопку выбора на телефонном устройстве. Я не использую jquery или jquery mobile для разработки мобильного интерфейса. Я не хочу разрабатывать выпадающее меню с использованием html5 и css, поэтому прошу вас сообщить мне какой-нибудь альтернативный способ справиться с этим.


cordova onsen-ui
person jalpa    schedule 25.11.2014    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Вы можете попробовать использовать <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

person Andreas Argelius    schedule 26.11.2014
comment
Это очень полезно для меня. Это именно то, что я ищу @Andreas Argelius - person jalpa; 26.11.2014

arrow_upward
3
arrow_downward

Вы имели в виду что-то подобное?

ДЕМО

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();
  });
});
person bhdrk    schedule 25.11.2014
comment
Вы получили мое требование, но вместо модального окна это должно быть плавное отображение меню, добавленное ниже к значку (+) справа. Как это demo.ourtuts.com/menu - person jalpa; 25.11.2014
comment
Есть простой, но грязный способ :) Обновил демку. Пожалуйста, посмотрите это. - person bhdrk; 25.11.2014
comment
На самом деле я советую вам ionicframework. его CSS-фреймворк проще, чем onsenui. - person bhdrk; 25.11.2014
comment
В версии 1.2 есть новый компонент, который может быть тем, что вы ищете, называется popover: onsen.io/guide/components.html#ons-popover - person Guillermo Gutiérrez; 25.11.2014