onsenUIでクリック時にdialog表示

なんだかまだあまりonsenUIについてちゃんと理解していないので、たまたま動いたり動かなかったりするので後々使うつもりの機能はいちいちメモっておこう。

今回はコンポーネントを使うときの書き方だ。

あんま関係ないけど、今回の操作はこの記事の作業(コンポーネント読み込みなど)を前提にしている。

page1.htmlに以下を記述

 

重要なのは以下。
で囲むことで、ダイアログのページを書くことができる。

次に重要なのがjsファイルでの記述。

 

前の記事でも書いているがbootstrapやreadyなどの記述は勿論1回でいい。

 

これでダイアログを呼び出す。

dialogコンポーネントは他のものと違ってダイアログを表示する前に、ons.createDialog()関数を呼び出す必要があるらしい。

そして、ダイアログを表示するためにshow()メソッドを使用する。
ココで参照しているdialogは、ons-dialogのvarで指定した変数を指す。

完成品。

 

呼び出す度にcreateDialogと書くわけないであろうが、今はよくわかってないので以上。
ons-dialog リファレンス – Onsen UIフレームワーク
ちなみに上の解説ページではanglarJSを使って(?)書いているなあ。
やっぱAnglarJS勉強しないとダメかなあ…。

コメントを残す