Déroulant l'option de menu à l'aide de onsen de l'INTERFACE utilisateur

Je veux développer menu déroulant en-tête disponible sur l'android barre d'outils de navigation. Je suis à l'aide de phonegap & onsen UI Framework pour développer l'application mobile. Je peux en mesure de charger coulissantes menu de gauche & côté droit mais pour l'instant, mon exigence est d'ouvrir déroulant si il faut cliquer sur l'icône d'affichage de l'image.

Même liste doit être affichée(ouvert) si l'utilisateur appuyez sur la touche option de téléphone de l'appareil. Je ne suis pas à l'aide de jquery, jquery mobile pour développer des services mobiles de l'INTERFACE utilisateur. Je ne veux pas développer menu déroulant à l'aide de html5 & css, donc je vous demande s'il vous plaît laissez-moi savoir une autre façon de le gérer.

InformationsquelleAutor jalpa | 2014-11-25
  1. 9

    Vous pouvez essayer d'utiliser <ons-popover> avec un <ons-list> à l'intérieur.

    Créer la liste à l'intérieur d'un modèle:

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

    Vous pouvez afficher la liste en utilisant le code JavaScript suivant:

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

    J'ai créé un exemple qui montre comment vous pouvez l'utiliser comme un menu déroulant:
    http://codepen.io/argelius/pen/zxGEza

    • Il est très utile pour moi. C'est extactly ce que je suis à la recherche d' @Andreas Argelius
    InformationsquelleAutor Andreas Argelius
  2. 3

    Vouliez-vous dire quelque chose comme ça?

    DÉMO

    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();
});
});
    • Votre eu mon exigence, mais au lieu de modal box, il doit être lisse affichage du menu en annexe ci-dessous pour (+) icône à droite. Comme ceci demo.ourtuts.com/menu
    • Il est simple mais sale 🙂 j'ai mis à jour la démo. Veuillez voir que.
    • En fait, je vous conseille ionicframework. son framework css est simple que onsenui.
    • Il y a un nouveau composant dans la version 1.2, qui est peut-être ce que vous cherchez, appelée liste: onsen.io/guide/composants.html#ons-liste
    InformationsquelleAutor bhdrk