1

プッシュページでリンク先へスライド表示したいのですが上手く行きません。(ページ遷移しない)
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> 
                    &nbsp;&nbsp;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> 
                    &nbsp;&nbsp;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> 
                    &nbsp;&nbsp;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>
                    &nbsp;Web&Links
                    </span>
                </div>
            </ons-list-item>
            
        </ons-list>
    </ons-page>
</body>

</html>

1 件の回答 1

3

やり方が違いますが、これではだめですか?

<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 modifier="chevron" class="index-item" style="height: 10px;" ng-click="navi.pushPage('page1.html', { animation: 'slide' });">
                    <div id="homen">
                        <span class="index-item-title" style="height: 10px;"><i class="fa fa-rss" style="color: #ffffff;"></i> 
                        &nbsp;&nbsp;list1</span>
                    </div>                          
                </ons-list-item>
    <!-- 2-->
                <ons-list-item modifier="chevron" class="index-item" ng-click="navi.pushPage('page1.html', { animation: 'lift' });">
                    <div id="homec">
                        <span class="index-item-title"><i class="fa fa-calendar" style="color: #ffffff;"></i> 
                        &nbsp;&nbsp;list2        
                        </span>
                    </div>                                        
                </ons-list-item>
    <!-- 3-->    
                <ons-list-item modifier="chevron" class="index-item" ng-click="navi.pushPage('page1.html', { animation: 'fade' });">
                    <div id="homel">
                        <span class="index-item-title"><i class="fa fa-book" style="color: #ffffff;"></i> 
                        &nbsp;&nbsp;list3
                        </span>
                    </div>                                        
                </ons-list-item>
    <!-- 4-->    
                <ons-list-item modifier="chevron" class="index-item" ng-click="navi.pushPage('page1.html', { animation: 'none' });">
                    <div id="homel">
                        <span class="index-item-title"><i class="fa fa-globe fa-lg" style="color: #ffffff;"></i>
                        &nbsp;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>

3
  • >>ita_3yさん 質問を投稿した者です。レスありがとうございます。もう殆ど求めてた答えなのですが、page1.htmlの部分を別のファイルで管理したいのですがどのようにやれば良かったでしょうか? Commented 2015年3月18日 4:44
  • @いっちゃん 別ファイルをpushしたい場合は、普通に対象ファイルの名前を指定してあげれば大丈夫です。
    – ita_3y
    Commented 2015年3月18日 5:16
  • @ita_3yさん レス有難うございます。ご指摘いただいた内容で上手くいきました。 Commented 2015年3月18日 7:50

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。