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

読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

themeをユーザー設定可能にする

ウェブアプリとかですと、ユーザーがテーマを設定できるようにしたかったりします。そんなときのテクニック。

<!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とかがあれば済む話なのですが。