jQuery Mobileでjsからダイアログを開く方法
jQueryMobileのダイアログはアンカーリンクに"data-rel='dialog'"を追加するだけなのでとても簡単だ。
しかし、ひとつ欠点がある。アンカーリンクを仕込める場所にしか作れないのだ。
それに加えて以下のような制約がある。
そのため、javascriptからダイアログを開きたいという要請に上手く答えることができない。
苦肉の策として以下のページの用な対応方法がある。
Dialog _ jQuerymobile -stackoverflow
回答の一つ目はどうしても動作しなかった。二つ目の回答は僕の環境でも動作した。
たしかに、書き方は良くないかもしれないが、とりあえず動くようだ。
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.5.2.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.0a4.1.js"></script> <link rel="stylesheet" href="css/mobile/jquery.mobile-1.0a4.1.css"> <script type="text/javascript"> function dialog(){ $("<a href='#popup' data-rel='dialog'></a>").click().remove(); } </script> </head> <meta charset="utf-8" /> <title>jQMobile test</title> <body> <div data-role="page" id="index"> <div data-role="header">header</div> <div data-role="content"> <p> Content! </p> <button onClick="dialog()">dialog</button> </div> <div data-role="footer">footer</div> </div> <div data-role="page" id="popup"> <div data-role="header">dialog header</div> <div data-role="content">dialog content</div> <div data-role="footer">dialog footer</div> </div> </body> </html>