I want to slide to the link on the push page, but it doesn't work.(No page transitions)
The log seems to have been spewed out, so the processing itself seems to have gone through, but is there anything wrong with the way the pushpage is written?
(function(){
varisAndroid=navigator.userAgent.indexOf('Android')!=-1;
//--------01
$(document).on('click', '#homenews', function(){
console.log('homenews clicked');
index.navi.pushPage('sample.html', {animation:'Slide Reveal Left'});
});
//--------02
$(document).on('click', '#homecalendar', function(){
console.log('homecalendar clicked');
index.navi.pushPage('index.html', {animation:'Slide Reveal Left'});
});
//--------03
$(document).on('click', '#homeelibrary', function(){
console.log('homely clicked');
index.navi.pushPage('index.html', {animation:'Slide Reveal Left'});
});
//--------04
$(document).on('click', '#homelinks', function(){
console.log('homelinks clicked');
index.navi.pushPage('sample.html', {animation:'Slide Reveal Left'});
});
})();<!DOCTYPE HTML>
<htmlng-app="myApp">
<head>
<metacharset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=yes">
<meta name="format-detection" content="telephone=no">
<script src="components/loader.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="js/angular-sanitize.min.js">/script>
<script src="js/index.js"></script>
<script src="js/jquery-1.11.0.min.js">/script>
<script src="js/jquery.glide.min.js">/script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/onsen-css-components/onsen-css-components.min.css">
<link rel="stylesheet" href="css/index.css">
<script>
</script>
</head>
<body>
<ons-page id="index-list-page">
<div class="logo" style="width:50%;position:absolute;left:10px;bottom:190px;">
<img id="img-logo" src="img/logo_1.png" style="width: 100%;">
</div>
<ons-list class="index-list">
<!--1-->
<ons-list-item modulator="chevron" class="index-item" style="height:10px;">
<divid="homenews">
<span class="index-item-title" style="height:10px;">ic class="fa fa-rss" style="color:#ffff;">/i>
News</span>
</div>
</ons-list-item>
<!--2-->
<ons-list-item modulator="chevron" class="index-item">
<divid="homecalendar">
<span class="index-item-title"><ic class="fa fa-calendar" style="color:#ffffff;">/i>
Calendar
</span>
</div>
</ons-list-item>
<!--3-->
<ons-list-item modulator="chevron" class="index-item">
<divid="homeelibrary">
<span class="index-item-title"><ic class="fa-book" style="color:#ffffff;">/i>
Library
</span>
</div>
</ons-list-item>
<!--4-->
<ons-list-item modulator="chevron" class="index-item">
<divid="homelinks">
<span class="index-item-title"><ic class="fa fa-globe fa-lg" style="color:#ffffff;">/i>
Web & Links
</span>
</div>
</ons-list-item>
</ons-list>
</ons-page>
</body>
</html>
It's a different way of doing it, but can't I do it like this?
<head>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css"rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css"rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/onsenui.min.js"></script>
<script>
ons.bootstrap();
</script>
</head>
<body>
<ons-navigator var="navi">
<ons-page id="index-list-page">
<div class="logo" style="width:50%;position:absolute;left:10px;bottom:190px;">
<img id="img-logo" src="img/logo_1.png" style="width: 100%;">
</div>
<ons-list class="index-list">
<!--1-->
<ons-list-item modulator="chevron" class="index-item" style="height:10px;"ng-click="navi.pushPage('page1.html', {animation:'slide'});">
<divid="home">
<span class="index-item-title" style="height:10px;">ic class="fa fa-rss" style="color:#ffff;">/i>
list1</span>
</div>
</ons-list-item>
<!--2-->
<ons-list-item modulator="chevron" class="index-item"ng-click="navi.pushPage('page1.html', {animation:'lift'});">
<divid="homeec">
<span class="index-item-title"><ic class="fa fa-calendar" style="color:#ffffff;">/i>
list2
</span>
</div>
</ons-list-item>
<!--3-->
<ons-list-item modulator="chevron" class="index-item"ng-click="navi.pushPage('page1.html', {animation:'fade'});">
<divid="homeel">
<span class="index-item-title"><ic class="fa-book" style="color:#ffffff;">/i>
list3
</span>
</div>
</ons-list-item>
<!--4-->
<ons-list-item modulator="chevron" class="index-item"ng-click="navi.pushPage('page1.html', {animation:'none'});">
<divid="homeel">
<span class="index-item-title"><ic class="fa fa-globe fa-lg" style="color:#ffffff;">/i>
list4
</span>
</div>
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Page1</div>
</ons-toolbar>
<div style="text-align:center;margin-top:100px;">
<ons-button modifier="light" onclick="navi.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
</body>
© 2024 OneMinuteCode. All rights reserved.