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
Post a Comment