pinpikokun score 368
2016/11/01 11:38 投稿
| 以下のような感じでしょうか。 |
| [動作リンク](http://plnkr.co/edit/ZndIy8OU6ZsoOO1wUx2J?p=preview) |
| ```html |
| <html> |
| <head> |
| <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/js/onsenui.min.js"></script> |
| <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" /> |
| <script> |
| $(function(){ |
| $('.pop').on('click',function(e){ |
| $('.pop ons-list-item').on('click',function(e){ |
| $("#result").html($(this).attr("name") + "をクリックしました"); |
| popover.hide(); |
| }); |
| }); |
| </script> |
| </head> |
| <body> |
| <ons-popover direction="down" id="popover"> |
| <ons-list> |
| <ons-list-item class="pop" name="new">新着通知</ons-list-item> |
| <ons-list-item class="pop" name="folder">フォルダを作成</ons-list-item> |
| <ons-list-item class="pop" name="edit">編集</ons-list-item> |
| <ons-list class="pop"> |
| <ons-list-item name="new">新着通知</ons-list-item> |
| <ons-list-item name="folder">フォルダを作成</ons-list-item> |
| <ons-list-item name="edit">編集</ons-list-item> |
| </ons-list> |
| </ons-popover> |
| <ons-navigator title="Navigator" var="myNavigator"> |
| <ons-page> |
| <ons-toolbar> |
| <div class="left"> |
| <ons-toolbar-button onclick="popover.show(event)">ポップオーバー</ons-toolbar-button> |
| </div> |
| <div class="center">Home</div> |
| </ons-toolbar> |
| <br><br> |
| <div style="text-align: center"> |
| <div style id="result">結果を表示</div> |
| </div> |
| </ons-page> |
| </ons-navigator> |
| </body> |
| </html> |
| ``` |
