jQuery mobileでボタンを無効化／有効化したくて試したけどなかなかできず嵌ったのでメモ。
- enable/disable/refreshメソッドがある
- enable/disableを読んだあとにrefreshを呼ぶ必要がある
- jQueryで”$(document).ready(function{});”としてたところを、jQuery mobileでは$(document).delegate(“#pageid”, “pageinit”, function(){});とする(？)
確認ページ：hello_jQuery_mobile_button_toggle.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>jQuery mobile ボタンの無効化／有効化</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- http://jquerymobile.com/blog/2012/01/26/jquery-mobile-1-0-1-released/ -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).delegate("#home", "pageinit", function() {
$('#btnToggle').bind('tap', toggleButtonStatus);
});
function toggleButtonStatus() {
if ($('#btnTarget').attr('disabled') == 'disabled') {
$('#btnTarget').button('enable');
}
else {
$('#btnTarget').button('disable');
}
$('#getTweets').button('refresh');
}
</script>
</head>
<body>
<!-- Home page -->
<div data-role="page" id="home">
<div data-role="header">
<h1>jQuery mobile ボタンの無効化／有効化</h1>
</div>
<div data-role="content" align="center">
<div data-role="controlgroup" data-type="horizontal">
<input type="button" id="btnToggle" value="本ボタン押下で'ターゲット'の状態が切り替わります" data-inline="true">
<input type="button" id="btnTarget" value="ターゲット" data-inline="true">
</div>
</div>
<div data-role="footer">
<h4>Copyright 2012</h4>
</div>
</div>
</body>
</html>
参考サイト
関連エントリー
