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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!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/ --><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> |
参考サイト
関連エントリー
