Menu opcji rozwijanej przy użyciu interfejsu użytkownika onsen

Question

Chcę rozwinąć nagłówek menu rozwijanego jako dostępny na pasku narzędzi systemu Android. Używam phonegap & onsen UI Framework do opracowania aplikacji mobilnej. Mogę załadować przesuwne menu od lewej strony: & prawą stroną, ale teraz moim wymaganiem jest otworzyć menu rozwijane, jeśli trzeba nacisnąć ikonę wyświetlaną na obrazku.

Ta sama lista powinna być wyświetlana (otwarta), jeśli użytkownik naciśnie przycisk opcji z urządzenia telefonicznego. Nie używam jquery ani jquery mobile do rozwijania mobilnego interfejsu użytkownika. Nie chcę rozwijać rozwijanego menu przy użyciu html5 & css, więc proszę, proszę, daj mi znać jakiś alternatywny sposób, aby sobie z tym poradzić.

Answer 1

Można spróbować użyć <ons-popover> z <ons-list> wewnątrz.

Tworzenie popover wewnątrz szablonu:

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

Można pokazać popover stosując następujący kod JavaScript:

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

Utworzyłem przykład, który pokazuje w jaki sposób można go używać jako z menu rozwijanego: http://codepen.io/argelius/pen/zxGEza

Answer 2

Czy miałeś na myśli coś takiego?

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