3

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

--home.html

<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>

<中略>

<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>

としています。

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

index.html

<!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>

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

popover.js

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

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

2 件の回答 2

2

表示位置とか大きさとかいろいろおかしいですが、一応表示はできました。
ガイドの実例で「Edit」を押すとCodePenに飛べるので、そっちを参考にした方がやりやすいかもしれません。
あと、Onsen UIがAngularJSベースらしいので、Angularっぽい記述の方が動きやすい気がします。

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();
  };
});
<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>

5
  • ご回答有難うございます。私が記載した通りons-navigatorが必要になり、htmlを別ファイルにした場合に動かなくなります。それってJSファイルを個別に読み込ませないとダメってことでしょうか?上記のものだとSPAで書いたように見えるので、そうじゃない場合はどうすればいいかという点が分かればと思います。onsen-uiはangularベースですがSPAだけで制御するわけではないと思っています。それに、サンプルを掲載して頂いても私としては自分のコードの方のどこが間違っているのかがわからないので困っています。また、StackOverFlowに投稿してない場いるのはonsen-uiチームの方からご返信が頂けると思って掲載しているのですが、ita_3yさんはonsen-uiチームの方なのでしょうか?ご回答いただけるのはありがたいのですが、目的とアウトプットが違うのでご認識のほどお願いします。
    – user5886
    Commented 2015年4月15日 11:02
  • ご回答有難うございます。自己解決しました。反応しなかった理由はSPAじゃない場合はJSをそのhtmlにて読み込ませる必要があるのと、ons-toolbarタグ内で利用する必要があり、且つ、ons-toolbar-iconを利用したあとにons-iconを使っているので、onclickメソッドを利用する場合はons-iconに設定する必要がありました。
    – user5886
    Commented 2015年4月15日 12:56
  • @MasahiroKawai あまり役に立てた気がしませんが、無事解決されたとのことで良かったです。回答の内容と実際の解決方法が大幅に異なるのであれば、自分で回答を追加してそちらをベストアンサーにした方が同じ問題にぶつかった方の助けになると思います。お疲れさまでした。
    – ita_3y
    Commented 2015年4月15日 14:13
  • @MasahiroKawai 今さらですが回答(スニペット)を修正しました。おそらくですが、質問の意図していた所に近づけたのではないかと思います。気が向いたら参考程度に見てみてください。
    – ita_3y
    Commented 2015年4月16日 5:25
  • そうですね、これにpopover用のCSSを別途用意すれば意図したようになる様です。ons-popoverにvarを指定するだけでもangularと同様の動きにはなるみたいですね。
    – user5886
    Commented 2015年4月17日 12:41
0

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

home.html

<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>

popover.html

    <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>

popover.js

ons.ready(function() {
    ons.createPopover('popover.html');
});

まとめると

        ons.bootstrap();
        ons.ready(function() {
            ons.createPopover('popover.html');
        });
     .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;
      }
<!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>

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