温泉 UI 与 Jquery

Question

我是温泉的新手 UI。我正在尝试将它与 Jquery 一起使用，但互联网上的例子很少。我有一个带有单个幻灯片菜单的 index.html 页面。它有一个带有导航器的主页（这是一个列表页面，其中每个项目都像一个菜单）。当我点击任何项目时，我会在导航器中推送相应的页面。我想从 ons.ready 函数访问按钮（使用 jquery） o 操作我的 app.js.

任何部分的内容

我该怎么做？

这是我的index.html

<html>
    <head>
        <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body>
        <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="main.html" side="left" type="overlay" max-slide-distance="200px"></ons-sliding-menu>
    </body> 
</html>

main.html

<ons-navigator title="Main Navigator" var="app.mainNavigator" ons-postpush="manageNav" id="mainNavigator">
   <ons-page>
       <ons-toolbar> </ons-toolbar>
       <ons-list>
           <ons-list-header>My Option</ons-list-header>
               <ons-list-item modifier="chevron" onclick="app.mainNavigator.pushPage('myoption.html',{animation: 'slide'});">
               </ons-list-item>
       </ons-list>
   </ons-page>

myoption.html

<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Title</div>
        <div class="right">
            <ons-button onclick="goHome();">Home</ons-button>
        </div>
    </ons-toolbar>
    <ons-list>
        <ons-list-item>
             <input id="txtName" type="text" placeholder="Name" class="text-input text-input--underbar" style="margin-top:8px; width: 100%;">
        </ons-list-item>
    </ons-list>
<div class="content-padded" style="text-align: center">
    <ons-button id="mybutton" onclick="">A button</ons-button>
</div>

我想知道如何访问 "mybutton" 以及如何使用 jquery 从 goHome() 访问我的页面的任何组件，所有这些都在我的 app.js 文件中。我必须在 ons.ready 函数中设置吗？

提前致谢。

Answer 1

您可以使用 angularJS 访问按钮并触发 goHome() 函数。

html

<div class="right" ng-controller="MyOptionController">
    <ons-button ng-click="goHome();">Home</ons-button>
</div>

angularJS

myApp.controller('MyOptionController', function () {
    ons.ready(function () {
        $scope.goHome = function () {
            //your code
            app.mainNavigator.popPage({animation: 'slide'});
        }
    }
}

温泉 UI 与 Jquery

Onsen UI with Jquery

jquery

cordova

onsen-ui