onsenUIの「popover」について

【質問内容】
「popover」を使用して、数種類あるポップアップ(新着通知、フォルダを作成、編集)から押されたポップアップに応じて処理を変更したいのですが、個別に判定するにはどのようにすればよいのか分からなかった為ご質問致しました。
何卒よろしくお願い致します。

index.html

html
1    <ons-toolbar>
2      
3        <div class="center">Home</div>
4        <div class="right">
5            <script type="text/javascript" src="popover.js"></script>
6            <ons-toolbar-button><ons-icon icon="ion-ios-bell" onclick="popover.show(event)"></ons-icon></ons-toolbar-button>
7        </div>
8    </ons-toolbar>
9

popover.html

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

   ```javascript
 var navi = null;
    
    ons.ready(function() {
       ons.createPopover('popover.html').then(function(popover){
           navi = popover;
       });
     });

行動規範の内容に同意します

回答1件

ベストアンサー

以下のような感じでしょうか。

動作リンク

html
1<html>
2 <head>
3    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
4    <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/js/onsenui.min.js"></script>
5    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/css/onsenui.min.css" />   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/css/onsen-css-components.min.css" />
6    <script>
7
8      $(function(){
9        $('.pop ons-list-item').on('click',function(e){
10          $("#result").html($(this).attr("name") + "をクリックしました");
11          popover.hide();
12        });
13      });
14     
15   </script>
16 </head>
17 <body>
18    <ons-popover direction="down" id="popover">
19      <ons-list class="pop">
20        <ons-list-item name="new">新着通知</ons-list-item>
21        <ons-list-item name="folder">フォルダを作成</ons-list-item>
22        <ons-list-item name="edit">編集</ons-list-item>
23      </ons-list>
24    </ons-popover>
25    <ons-navigator title="Navigator" var="myNavigator">
26      <ons-page>
27        <ons-toolbar>
28            <div class="left">
29              <ons-toolbar-button onclick="popover.show(event)">ポップオーバー</ons-toolbar-button>
30          </div>
31          <div class="center">Home</div>
32        </ons-toolbar>
33        <br><br>
34        <div style="text-align: center">
35          <div style id="result">結果を表示</div>
36        </div>
37      </ons-page>
38    </ons-navigator>
39 </body>
40</html>