jQuery Mobileを使う際に知っておくと役立ちそうなTipsや情報のまとめ

jQuery Mobileに関して少し整理したいので
まとめました。JQMを使うときに知っておくと
便利そうなTipsとか情報とか。いくつか自分
の記事も含まれているのが若干アレなんです
が、ご了承ください。内容はコードのみ、では
なく、参考サイトなど一貫性無い感じですが。

整理するのが下手なもので一貫性に欠ける内容で申し訳ないですけど、jQuery Mibileを使ったWebサイト構築時のちょっとしたTipsや役に立つ情報などのまとめです。

ページ移動にAjaxを使わないようにする

プラグインの前に記述。リンク単位でならマークアップでrel=”external”を、フォームはdata-ajax=”false”を加える。

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script type="text/javascript">
jQuery(document).bind("mobileinit", function(){
jQuery.mobile.ajaxEnabled = false;
});
 
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

これでAjax推移は止まります。

via:10 handy jQuery mobile tips and snippets to get you started

アンカーリンク以外でダイアログを開く

<script type="text/javascript">
    function dialog(){
      $("<a href='#popup' data-rel='dialog'></a>").click().remove();
    }
  </script>

これで

<button onClick="dialog()">dialog</button>

でもダイアログ動作する。
via:ハードコイルド・ワンダーランド

メッセージとかのローカライズ

<script>
$(document).bind('mobileinit', function(){
// ここから日本語化
$.mobile.loadingMessage = '読み込んでいます';
$.mobile.pageLoadErrorMessage = '読み込みに失敗しました';
$.mobile.dialog.prototype.options.closeBtnText = '閉じる';
$.mobile.selectmenu.prototype.options.closeText= '閉じる';
$.mobile.listview.prototype.options.filterPlaceholder = '検索文字列';
$.mobile.page.prototype.options.backBtnText = '戻る';
});
</script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

必要に応じて適当に。
via:jQuery Mobileをマジメに使うならやっておくべきローカライズとかの設定

ページのロード毎に背景画像を変える

.my-page  { background: transparent url(../images/bg.jpg) 0 0 no-repeat; }
.my-page.bg1 { background: transparent url(../images/bg-1.jpg) 0 0 no-repeat; }
.my-page.bg2 { background: transparent url(../images/bg-2.jpg) 0 0 no-repeat; }
.my-page.bg3 { background: transparent url(../images/bg-3.jpg) 0 0 no-repeat; }

で、jsを書く。

$('.my-page').live("pagecreate", function() {
  var randombg = Math.floor(Math.random()*4); 
  $('.my-page').removeClass().addClass('bg' + randombg);
});

まだ試してない。

via:Top 10 jQuery Mobile Code Snippets that you need to know

Google Analyticsを使うときの注意

Ajaxによるページ推移だとPVとか取れないので取れるように工夫する。

//set
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
 
//async
(function () {
  var ga = document.createElement('script'); ga.async = true; 
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
 
//exe
$('[data-role="page"]').live('pageshow', function(){
  var u = location.hash.replace('#', '');
  u ? _gaq.push(['_trackPageview', u]) : _gaq.push(['_trackPageview']);  
});