読者です 読者をやめる 読者になる 読者になる

jQuery Mobileでjsからダイアログを開く方法

jQueryMobile

jQueryMobileのダイアログはアンカーリンクに"data-rel='dialog'"を追加するだけなのでとても簡単だ。
しかし、ひとつ欠点がある。アンカーリンクを仕込める場所にしか作れないのだ。
それに加えて以下のような制約がある。

  • window.open(url)が使えない
  • jquery-ui-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>