ウェブアプリとかですと、ユーザーがテーマを設定できるようにしたかったりします。そんなときのテクニック。
<!DOCTYPE html> <html> <head> ... </head> <body style="display: none;"> ... <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript"> // Theme should be determined before mobileinit is invoked. if (localStorage['.setting']) { // ".setting" is the name of setting assumed here." var setting = JSON.parse(localStorage['.setting']); if (setting.theme) $('[data-theme]').attr('data-theme', setting.theme) $('select#theme').val(setting.theme) } $(document).bind('mobileinit', function() { $(document.body).css('display', 'block'); }); </script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </body> </html>
ポイントは、「 mobileinitではdata-themeを変えても既にオープニングのページはレンダリングが始まっていてテーマが変更されない」というところです。(jQuery Mobile 1.0.1)
なので、
0. 生のHTMLが見えることがないようにbodyをinvisibleにしておく。
1. DOMをすべて読み込んでから処理するように<body>の最後に<script>を入れる。
2. jQuery Mobileを読み込む前にdata-themeを変更する。
3. mobileinitでbodyをvisibleに変更。
4. jQuery Mobileを読み込む。
これで再起動(reload)後にテーマが変わります。
再起動(reload)なしで動的にテーマを変える方法はわかりませんでした。ページをリフレッシュするAPIとかがあれば済む話なのですが。