angularjs онсно-щ раздвижного меню ДИВ мышь не работает

Примера:angularjs онсно-щ раздвижного меню ДИВ мышь не работает

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

работает

, но если я добавить раздвижное меню не работает:

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']);

Заранее спасибо

источник

2016-06-10 Arcadio

При использовании jsfiddle, пожалуйста, также разместить код. На этот раз я сделал это для вас. (в очереди просмотра редактирования) – rrauenza

Спасибо @rrauenza – Arcadio

Я нашел проблему, но не решение. в 'Onsen CSS' они отключили' user-select', поэтому вы не можете даже выбрать текст. Я думаю, что есть еще несколько css, которые они добавили, чтобы заблокировать взаимодействие с пользователем. –

Вот код ручка для скользящего меню с кодом - это входные блоки пользователя и я не уверен, почему они это сделали, но функции CSS переопределение по крайней мере, в хроме. https://codepen.io/anon/pen/rLxPOa В общем, у вас должен быть код, завернутый в ons-page.

Кроме того, я думаю, что скользящее меню было отодвинуто только на Угловые 1 привязки и рекомендовало использовать ons-splitter. Это же функциональность с большим количеством опций, хотя и, самое главное, без хакеров CSS, чтобы заставить его работать.

Вот функционирующий codepen, который показывает ваш Div работу, но использует сплиттер вместо: 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>

источник

2016-06-11 03:14:52 Munsterlander

Большое спасибо, Мой пример работает над версией кандидата onsen-iu 2.0, но я не хочу обновляться до публикации окончательной версии. Я предполагаю, что я приму решение (ons-splitter) в более поздней версии своего продукта, но теперь, если это возможно, я хочу остаться в текущей версии onsen-iu. – Arcadio

Ну, Onsen находится в финальной версии 2.0, так как они пробиваются через RC. Они сказали, что они не изменят методологию слишком много отсюда. Я уже издал приложения с RC (6 в то время) с большим успехом. Улучшения пользовательского интерфейса огромны и очень важны для ИМО. – Munsterlander

angularjs онсно-щ раздвижного меню ДИВ мышь не работает

ответ

Смежные вопросы