Как использовать Onsen UI + Monaca + jQuery

Я новичок в пользовательском интерфейсе Onsen. Я использую Monaca, и я пытаюсь работать с jQuery.Как использовать Onsen UI + Monaca + jQuery

Ниже вы можете проверить мои HTML-страницы и JS-скрипты.

index.html

<!DOCTYPE HTML> 
<html lang="pt-br" app="nowa"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<link rel="stylesheet" href="components/loader.css"> 
<link rel="stylesheet" href="css/style.css"> 
<script src="components/loader.js"></script> 
<script src="js/app.js"></script> 
</head> 
<body> 
<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="right" type="overlay" max-slide-distance="200px"> 
</ons-sliding-menu> 
</body> 
</html>

page1.html

<ons-page> 
    <ons-toolbar> 
     <div class="right"> 
      <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button> 
     </div> 
     <div class="center">TEST</div> 
     </ons-toolbar>  
     <div ng-controller="menu"> 
      <div id="test">HELLO!</div> 
      <ons-row align="center" style="border: 1px solid red;"> 
       <ons-col> 
        <div> 
         <div class="circle perfil-icone"></div> 
         <div>ICON 1</div> 
        </div> 
       </ons-col> 
       <ons-col> 
        <div> 
         <div class="circle exame-icone"></div> 
         <div>ICON 2</div> 
        </div> 
       </ons-col> 

       <ons-col> 
        <div> 
         <div class="circle alerta-icone"></div> 
         <div>ICON 3</div> 
        </div> 
       </ons-col> 
      </ons-row> 
      <p></p> 
      <ons-row align="center" style="border: 1px solid red;"> 
       <ons-col> 
        <div> 
         <div class="circle favorito-icone"></div> 
         <div>ICON 4</div> 
        </div> 
       </ons-col> 
       <ons-col> 
        <div> 
         <div class="circle lab-icone"></div> 
         <div>ICON 5</div> 
        </div> 
       </ons-col> 
       <ons-col> 
        <div> 
         <div class="circle rota-icone"></div> 
         <div>ICON 6</div> 
        </div> 
       </ons-col> 
      </ons-row> 
     </div> 
</ons-page>

app.js

ons.bootstrap(); 
//ons.disableAutoStatusBarFill(); // (Monaca enables StatusBar plugin by default) 

var app = angular.module('nowa', [ 'ngTouch', 'onsen.directives']); 

app.controller('menu',function($scope){ 
    $(function(){ 
     alert("OI"); 
     $("#test").html(" USERNAME!"); 
    }); 
});

Вопрос заключается в том, что команды оповещения и HTML в JavaScript-код не работает. В чем проблема? Как использовать Onsen с JQuery?

источник

2014-09-30 Alan Gularte

Либо вы должны вручную включить jQuery.js в тег HTML, либо вам придется добавить компонент jQuery для мобильных устройств Monaca на вкладке «Конфигурация» (на Monaca IDE) JS/CSS.

источник

2014-10-01 04:39:22

Спасибо! Работает! Я не знаю, почему это не так ясно в обоих документах (Monaca и Onsen UI). –

Я согласен, что им нужно переделать документацию! :) –

JFYI. На самом деле, это упоминалось в документации Monaca здесь: http://docs.monaca.mobi/3.5/en/manual/application/monaca_plugin/. – khemry

Как использовать Onsen UI + Monaca + jQuery

ответ

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