如何使用温泉UI + Monaca + jQuery

我是Onsen UI的新手。我正在使用Monaca，我正在尝试使用jQuery。如何使用温泉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!"); 
    }); 
});

的问题是在JavaScript代码中不起作用该警报和HTML命令。这里有什么问题？如何使用JQuery的温泉？

来源

2014-09-30 Alan Gularte

要么你必须手动将jQuery.js包含在HTML标记中，要么必须在“配置”选项卡（在Monaca IDE上）JS/CSS组件下添加Monaca的jQuery Mobile组件。

来源

2014-10-01 04:39:22

谢谢！它正在工作！我不知道为什么这两个文档都不太清楚（Monaca和Onsen UI）。 – 2014-10-03 01:34:00

我同意他们需要重写他们的文档！ :) – 2014-10-04 00:41:31

JFYI。实际上，它在Monaca文档中已经提到：http://docs.monaca.mobi/3.5/en/manual/application/monaca_plugin/。 – khemry 2014-10-06 09:10:37

如何使用温泉UI + Monaca + jQuery

回答

相关问题