Monaca - onsen-uiでPopoverを出す時のハマリポイント

クラウドで出来るHTML5ハイブリッド開発という本の219Pにons-popoverの使い方が載っていますが、SPA主体のangularベースで記載でしたのでonsen-uiだけでやる場合の方法を記載します。

Toolbar

index.html

<ons-toolbar>
  <div class="left">
    <ons-toolbar-button>
    <ons-icon icon="bars"></ons-icon>
  </ons-toolbar-button>
  </div>
  <div class="center">Home</div>
  <div class="right">
   <script type="text/javascript" src="js/popover.js"></script>
   <ons-toolbar-button><ons-icon icon="ion-ios-bell" onclick="popover.show(this)"></ons-icon></ons-toolbar-button>
  </div>
</ons-toolbar>

popover.html

<ons-popover var="popover" cancelable style="width: 95%; max-width: 300px;" direction="down" animation="fade">
 <link rel="stylesheet" href="css/popover.css">
 <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>

popover.js

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

popover.css

.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;
}

SPAでやるときも同じなのですが、angularを使わずonsen-uiだけで動かしたい場合は、ons-popoverにvarを設定してください。それを参照してJSもonclickも反応しますのでこの変数を間違えないようにしてください。また、サンプルではmenuという変数を与えてますが、slidemenu等を使っている場合はかぶると思うので、私はpopoverというものを使いましたがpopover自体も複数設定するかと思うので、適切な設計を行ってください。

また、onclick="popover.show(this)のthisはeventなどでも大丈夫です。

popover用のcssを読み込むタイミングですが、SPAでやらない場合は各ページごとにJSとCSSを読み込ませたほうが間違いなく動くので、ons-pageの下にまたはons-page自体に読み込ませる場合はその上に記述してください。これはpopoverに限らず原則的にそのように動いています。

それから、クラウドIDE上のテストは非常にうまくいくのですが、iPhone等でデバッガーを使った場合は呼び出すまでに凄く時間がかかるので、気をつけてください。