如何使用 Onsen UI + Monaca + jQuery答案

【问题标题】：How to use Onsen UI + Monaca + jQuery如何使用 Onsen UI + Monaca + jQuery
【发布时间】：2014-09-30 20:51:18
【问题描述】：

我是 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!");
    });
});

问题是 javascript 代码中的 alert 和 html 命令不起作用。这里有什么问题？ Jquery如何使用温泉？

【问题讨论】：

标签： jquery onsen-ui monaca

【解决方案1】：

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

【讨论】：

谢谢！它正在工作！我不知道为什么这两个文档（Monaca 和 Onsen UI）都不太清楚。
JFYI。实际上，这里的 Monaca 文档中已经提到过：docs.monaca.mobi/3.5/en/manual/application/monaca_plugin。
我刚刚在文件中添加了 jquery |管理 JS/CSS 组件...我选择了 Project | JS/CSS组件...我选择了JQuery(Monaca版) 2.03版在哪里？！我在项目中找不到库......而且@khemry 该链接不再存在......
OK 在文档上搜索 JQuery 并发现：docs.monaca.io/en/monaca_ide/tutorial/adding_backend
还有这个onsen.io/v2/guide/jquery 但它只解释了onsenUI2和JQuery。不是如何在 Monaca 中设置它。