cordova - Onsen UI with Jquery -


i'm new onsen ui. trying use jquery, examples in internet few. have index.html page single slide menu. has main page(which list page each item menu) wiht navigator. when click in item push corresponding page in navigator. want access buttons(using jquery) ons.ready function o manipulate content part of app.js.

how this?

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

i want know how access "mybutton" , access gohome() component of pages using jquery, in app.js file. must set in ons.ready function?

thank in advance.

you may use angularjs access button , fire gohome() function.

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

Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -