AngularJS onsen-ui Sliding-Menü div Maus funktioniert nicht

Beispiel:AngularJS onsen-ui Sliding-Menü div Maus funktioniert nicht

<body ng-app="app"> 
<div contenteditable="true" style="line-height: 90%; border-radius: 25px; border: 2px solid #0000FF; padding: 10px; width: 96%; min-height: 70px;" > 
</body>

es funktioniert

aber wenn ich hinzufügen Schiebe-Menü nicht funktioniert:

JSFiddle

<body ng-app="app"> 
<ons-sliding-menu 
    menu-page="menu.html" main-page="hola.html" side="left" 
    </ons-sliding-menu> 
    <ons-template id="hola.html"> 
     <div contenteditable="true" style="line-height: 90%; border-radius: 25px; border: 2px solid #0000FF; padding: 10px; width: 96%; min-height: 70px;" > 
           </div> 
    </ons-template> 
</body>

javascript:

angular.module('app', ['onsen']);

Vielen Dank im Voraus

Quelle

2016-06-10 Arcadio

Wenn jsfiddle Bitte verwenden Sie den Code auch posten. Ich habe es diesmal für dich getan. (in Bearbeitung Review Queue) – rrauenza

Danke @rrauenza – Arcadio

Ich fand das Problem, aber nicht die Lösung. in 'Onsen CSS' haben sie die' user-select' deaktiviert, weshalb man nicht einmal den Text selbst auswählen kann. Ich denke, es gibt noch mehr CSS, die sie hinzugefügt haben, um die Benutzerinteraktion zu blockieren. –

ist hier ein Code Kugelschreiber für das Schiebe-Menü mit Ihrem Code - es blockiert Benutzereingabe, und ich bin nicht positiv, warum sie das taten, aber die Überschreibung CSS-Funktionen zumindest in Chrom. https://codepen.io/anon/pen/rLxPOa Im Allgemeinen sollten Sie Ihren Code in ons-page verpackt haben.

Darüber hinaus denke ich, gleitende Menü wurde nur Angular 1 Bindings verbannt und empfehlen die Verwendung ons-splitter. Es ist die gleiche Funktionalität mit mehr Optionen und vor allem, keine CSS-Hacks, damit es funktioniert.

Hier ist eine Funktion, die Ihre codepen div Arbeits zeigt, sondern verwendet stattdessen Splitter: https://codepen.io/anon/pen/qNbgZR?editors=101

<ons-splitter> 
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> 
    <ons-page> 
     <ons-list> 
     <ons-list-item onclick="fn.load('home.html')" tappable> 
      Home 
     </ons-list-item> 
     <ons-list-item onclick="fn.load('settings.html')" tappable> 
      Settings 
     </ons-list-item> 
     <ons-list-item onclick="fn.load('about.html')" tappable> 
      About 
     </ons-list-item> 
     </ons-list> 
    </ons-page> 
    </ons-splitter-side> 
    <ons-splitter-content id="content" page="home.html"></ons-splitter-content> 
</ons-splitter> 

<ons-template id="home.html"> 
    <ons-page> 
    <ons-toolbar> 
     <div class="left"> 
     <ons-toolbar-button onclick="fn.open()"> 
      <ons-icon icon="md-menu"></ons-icon> 
     </ons-toolbar-button> 
     </div> 
     <div class="center"> 
     Main 
     </div> 
    </ons-toolbar> 
    <div contenteditable="true" style="line-height: 90%; border-radius: 25px; border: 2px solid #0000FF; padding: 10px; width: 96%; min-height: 70px;" > 
     </div> 
    </ons-page> 
</ons-template>

Quelle

2016-06-11 03:14:52 Munsterlander

Vielen Dank, Mein Beispiel arbeitet an der Kandidat onsen-iu 2.0 Version, aber ich möchte nicht aktualisieren, bis die endgültige Version veröffentlicht wird. Ich vermute, dass ich Ihre Lösung (ons-Splitter) in einer späteren Version meines Produkts übernehmen werde, aber jetzt möchte ich in der aktuellen Version von onsen-iu bleiben, wenn möglich. – Arcadio

Nun, Onsen ist in ihrer finalen Version von 2.0, da sie ihren Weg durch RC's gehen. Sie haben gesagt, dass sie von jetzt an die Methodik nicht zu sehr ändern werden. Mit dem RC (damals 6) habe ich bereits Apps mit großem Erfolg veröffentlicht. Die Verbesserungen der Benutzeroberfläche sind riesig und es lohnt sich IMO. – Munsterlander

AngularJS onsen-ui Sliding-Menü div Maus funktioniert nicht

Antwort

Verwandte Themen