9144


monacaを使って開発してます。  
その際、slidemenuを使う関係上、index.htmlにslidemenuを書き込み、navigatorをhomeに指定しました。  
toolbarの左側にslidemenuを、右側にpopoverで通知を出したいと思い記述しましたが、上手く反応しません。タップしてもpopoverがなされません。

--home.html

[code]

    <ons-navigator title="PENDONA" animation="slide" var="navi">
            <link rel="stylesheet" href="css/carousel.css">
            <ons-page>
                <ons-toolbar>
                    <div class="left">
                        <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
                    </div>
                    <div class="center">Home</div>
                    <div class="right" id="tsuti">
                        <ons-toolbar-button onclick="navi.show('popover.html')"><ons-icon icon="ion-ios-bell"></ons-icon></ons-toolbar-button>
                    </div>
                </ons-toolbar>
    <!--　中略　-->
    
        </ons-page>
    </ons-navigator>
    
[/code]

<中略>

[code]

    <ons-template id="popover.html">
        <ons-popover cancelable style="width: 95%; max-width: 300px;" direction="down" animation="fade">
            <ons-row>
                <ons-col class="menu-item-col" onclick="menu.hide()">
                    <ons-icon icon="ion-upload" class="menu-item-icon"></ons-icon>
                    <div class="menu-item-label">新着通知</div>
                </ons-col>
                <ons-col class="menu-item-col" onclick="menu.hide()">
                    <ons-icon icon="ion-folder" class="menu-item-icon"></ons-icon>
                    <div class="menu-item-label">フォルダを作成</div>
                <ons-col class="menu-item-col" onclick="menu.hide()">
                    <ons-icon icon="ion-edit" class="menu-item-icon"></ons-icon>
                    <div class="menu-item-label">編集</div>
                </ons-col>
            </ons-row>
        </ons-popover>
    </ons-template>
    
[/code]

としています。

CSSやJavascriptはindex.htmlで読み込んでいます。

index.html

[code]

    <!DOCTYPE HTML>
    <html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="components/loader.css">
    
        <script src="js/vendor/ncmb-latest.min.js"></script>
        <script>
            ons.bootstrap();
        </script>
        <script type="text/javascript" src="js/base.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/user.js"></script>
        <script type="text/javascript" src="js/login.js"></script>
        <script type="text/javascript" src="js/popover.js"></script>
                <script>
                var a = 1;
                var b = 2;
    
                function debug(){
                    var c = a + b;
                    console.log("debug() function is executed!");
                    console.log("executed! variable c is " + c);
                }
    
                debug();
            </script>
    </head>
    <body>
    
        <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="home.html" swipable="true" swip-target-width="100px" max-slide-distance="150px" side="left" type="overlay">
        </ons-sliding-menu>
    
    </body>
    </html>
    
[/code]

この際の読み込んでいるpopover.js(index.html)の記述は以下のとおりです。

popover.js

[code]

    ons.ready(function() {
        ons.createPopover('popover.html').then(function(popover) {
        popover.show(e);   
        });
    });
    
[/code]

変数の渡し方が間違っていると思うのですが、サンプルを読んでもどの変数がどこに対応しているのかがよくわかりません。そこでご指導いただければと思いました。  
よろしくお願いします。


CC BY-SA 3.0
2015-04-14T02:25:40.263
9134
2015-04-17T13:37:48.287
2015-04-14T05:25:42.233
3516
question
monaca onsen-ui
ons-popover利用時のJavaScriptの変数の値について


表示位置とか大きさとかいろいろおかしいですが、一応表示はできました。  
[ガイド](http://ja.onsen.io/reference/ons-popover.html#events-
summary)の実例で「Edit」を押すとCodePenに飛べるので、そっちを参考にした方がやりやすいかもしれません。  
あと、Onsen UIがAngularJSベースらしいので、Angularっぽい記述の方が動きやすい気がします。

[code]

    ons.bootstrap()
    .factory("SharedService", ["$rootScope", function($rootScope) {
        var popover = null;
        return {
          popover: {
            get: function() { return popover; },
            create: function() {
              ons.createPopover('popover.html').then(function(pop) {
                popover = pop;
                $rootScope.$broadcast('done');
              });
            }
          }
        };
    }])
    .controller('AppController', function($scope, SharedService) {
    
      SharedService.popover.create();
    
      $scope.$on('done', function() {
        $scope.popover = SharedService.popover.get();
      });
    
      $scope.show = function(e) {
        $scope.popover.show(e);
      };
    })
    .controller('popUpController', function($scope, SharedService) {
    
      $scope.$on('done', function() {
        $scope.popover = SharedService.popover.get();
      });
      $scope.hide = function() {
        $scope.popover.hide();
      };
    });
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css" rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>
    
    <ons-sliding-menu
                      main-page="home.html"
                      menu-page="menu.html"       
                      side="left"
                      max-slide-distance="250px"
                      var="menu">
    </ons-sliding-menu>
    
    <ons-template id="home.html">
      <ons-navigator title="PENDONA" animation="slide" var="navi" ng-controller='AppController'>
        <ons-page>
          <ons-toolbar>
            <div class="left">
              <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
            </div>
            <div class="center">Home</div>
            <div class="right" id="tsuti">
              <ons-toolbar-button ng-click="show('#tsuti')"><ons-icon icon="ion-ios-bell"></ons-icon></ons-toolbar-button>
            </div>
          </ons-toolbar>
        
          <div style="text-align: center">
            <p style="color: #999; padding-top: 100px;">Home Content</p>
            <ons-button ng-click="navi.pushPage('page2.html')">Push Page</ons-button>
          </div>
        </ons-page>
      </ons-navigator>
    </ons-template>
    
    <ons-template id="page2.html">
      <ons-page>
        <ons-toolbar>
          <div class="left">
            <ons-back-button>Back</ons-back-button>
          </div>
          <div class="center">Page 2</div>
          <div class="right" id="pop">
            <ons-toolbar-button ng-click="show('#pop')"><ons-icon icon="ion-ios-bell"></ons-icon></ons-toolbar-button>
          </div>
        </ons-toolbar>
        <div style="text-align: center">
            <h1>Page 2</h1>
            <ons-button ng-click="menu.toggleMenu()">Toggle Menu</ons-button>
        </div>
      </ons-page>
    </ons-template>
    
    <ons-template id="menu.html">
      <ons-list>
        <ons-list-item modifier="chevron" onclick="menu.setMainPage('home.html', {closeMenu: true})">
          home.html
        </ons-list-item>
      </ons-list>
    </ons-template>
    
    <ons-template id="popover.html">
      <ons-popover cancelable style="width: 95%; max-width: 300px;" direction="down" animation="fade" ng-controller="popUpController">
        <ons-row>
          <ons-col class="menu-item-col" ng-click="hide()">
            <ons-icon icon="ion-upload" class="menu-item-icon"></ons-icon>
            <div class="menu-item-label">新規作成</div>
          </ons-col>
          <ons-col class="menu-item-col" ng-click="hide()">
            <ons-icon icon="ion-folder" class="menu-item-icon"></ons-icon>
            <div class="menu-item-label">フォルダを作成</div>
          </ons-col>
          <ons-col class="menu-item-col" ng-click="hide()">
            <ons-icon icon="ion-edit" class="menu-item-icon"></ons-icon>
            <div class="menu-item-label">編集</div>
          </ons-col>
        </ons-row>
      </ons-popover>
    </ons-template>
[/code]


CC BY-SA 3.0
2015-04-14T06:11:27.337
9144
2015-04-16T05:23:05.210
2015-04-16T05:23:05.210
3516
3516
9134
answer


自己解決しました。SPAとして作らない場合は以下の様にします。

home.html

[code]

    <ons-navigator animation="slide" var="navi">
      <ons-page>
       <ons-toolbar>
        <div class="left">
         <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()">
          <ons-icon icon="bars"></ons-icon>
         </ons-toolbar-button>
        </div>
        <div class="center">Home</div>
        <div class="right">
         <ons-toolbar-button><ons-icon icon="ion-ios-bell" onclick="popover.show(event)"></ons-icon></ons-toolbar-button>
         </div>
        </ons-toolbar>
                          <!--　中略　-->
    
        </ons-page>
    </ons-navigator>
    
[/code]

popover.html

[code]

        <ons-popover cancelable var="popover" style="width: 95%; max-width: 300px;" direction="down" animation="fade">
    <link rel="stylesheet" href="popover.css">
         <ons-row>
          <ons-col class="menu-item-col" onclick="menu.hide()">
           <ons-icon icon="ion-upload" class="menu-item-icon"></ons-icon>
            <div class="menu-item-label">新着通知</div>
          </ons-col>
          <ons-col class="menu-item-col" onclick="popover.hide()">
           <ons-icon icon="ion-folder" class="menu-item-icon"></ons-icon>
            <div class="menu-item-label">フォルダを作成</div>
          </ons-col>
          <ons-col class="menu-item-col" onclick="menu.hide()">
           <ons-icon icon="ion-edit" class="menu-item-icon"></ons-icon>
            <div class="menu-item-label">編集</div>
          </ons-col>
         </ons-row>
        </ons-popover>
    
[/code]

popover.js

[code]

    ons.ready(function() {
        ons.createPopover('popover.html');
    });
    
[/code]

まとめると

[code]

            ons.bootstrap();
            ons.ready(function() {
                ons.createPopover('popover.html');
            });
[/code]

[code]

         .menu-item-col {
          text-align: center;
          padding: 12px 0 12px 0;
          }
        
         .menu-item-col:not(:first-child) {
          border-left: 1px solid #eee;
          }
        
         .menu-item-col:active {
          background-color: #eee; 
          }
        
         .menu-item-label {
          font-size: 11px;
          color:  #333;
          margin-top: 3px;
          }
        
         .menu-item-icon {
          color: #999;
          font-size: 20px;
          }
        
         .popover__content {
          min-height: 0;
          }
[/code]

[code]

    <!DOCTYPE HTML>
    <html lang="ja">
        <head>
         <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css" rel="stylesheet"/>
         <link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
         <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css" rel="stylesheet"/>
         <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
         <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>
         <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
         <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>   
        </head>
        <body>
              <ons-page>
               <ons-toolbar>
                <div class="left">
                  <ons-icon icon="bars"></ons-icon>
                </div>
                <div class="center">Home</div>
                <div class="right">
                 <ons-toolbar-button><ons-icon icon="ion-ios-bell" onclick="popover.show(event)"></ons-icon></ons-toolbar-button>
                 </div>
                </ons-toolbar>
              </ons-page>  
        
             <ons-template id="popover.html">
               <ons-popover var="popover" cancelable style="width: 95%; max-width: 300px;" direction="down" animation="fade">
                <ons-row>
                 <ons-col class="menu-item-col" onclick="navi.hide()">
                  <ons-icon icon="ion-upload" class="menu-item-icon"></ons-icon>
                   <div class="menu-item-label" color: #999;>新着通知</div>
                  </ons-col>
                 <ons-col class="menu-item-col" onclick="navi.hide()">
                  <ons-icon icon="ion-folder" class="menu-item-icon"></ons-icon>
                   <div class="menu-item-label" color: #999;>フォルダを作成</div>
                  </ons-col>
                 <ons-col class="menu-item-col" onclick="navi.hide()">
                  <ons-icon icon="ion-edit" class="menu-item-icon"></ons-icon>
                   <div class="menu-item-label" color: #999;>編集</div>
                  </ons-col>
                </ons-row>
              </ons-popover>
             </ons-template>
              
        </body>
        </html>
[/code]


CC BY-SA 3.0
2015-04-17T13:06:25.400
9271
2015-04-17T13:37:48.287
2015-04-17T13:37:48.287
9134
answer