プッシュページでリンク先へスライド表示したいのですが上手く行きません。(ページ遷移しない)
logは吐き出されているので処理自体は通っている様なのですが、pushpageの書き方におかしいところは有りますでしょうか?
(function() {
var isAndroid = 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', '#homelibrary', function() {
console.log('homelibrary 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>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=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 modifier="chevron" class="index-item" style="height: 10px;" >
<div id="homenews">
<span class="index-item-title" style="height: 10px;"><i class="fa fa-rss" style="color: #ffffff;"></i>
News</span>
</div>
</ons-list-item>
<!-- 2-->
<ons-list-item modifier="chevron" class="index-item">
<div id="homecalendar">
<span class="index-item-title"><i class="fa fa-calendar" style="color: #ffffff;"></i>
Calendar
</span>
</div>
</ons-list-item>
<!-- 3-->
<ons-list-item modifier="chevron" class="index-item">
<div id="homelibrary">
<span class="index-item-title"><i class="fa fa-book" style="color: #ffffff;"></i>
Library
</span>
</div>
</ons-list-item>
<!-- 4-->
<ons-list-item modifier="chevron" class="index-item">
<div id="homelinks">
<span class="index-item-title"><i class="fa fa-globe fa-lg" style="color: #ffffff;"></i>
Web&Links
</span>
</div>
</ons-list-item>
</ons-list>
</ons-page>
</body>
</html>